小编pax*_*man的帖子

我有许多基本的不透明度过渡

emp_line.transition()
    .duration(1250)
    .attr('opacity', 1)

但是,当我运行它们时,这些项目通常会闪烁到完全不透明,然后回到无,然后淡入.有没有办法防止这些内容闪烁？

我确信有一个非常简单的优雅方式来做到这一点,但我无法弄明白.我有一些看起来像这样的输入数据:

[
{id: 1, name: "Peter"},
{id: 2, name: "Paul", manager: 1},
{id: 3, name: "Mary", manager: 1},
{id: 4, name: "John", manager: 2},
{id: 5, name: "Jane", manager: 2}
]

如果可能,我想使用d3.js嵌套操作符来获取在层次结构布局中使用的结构.像这样:

[ 
   {name: "Peter", children: [
          {name:"Paul", children: [
              {name:"John"},
              {name:"Jane"}
          ]},
          {name:"Mary"}
      ]
   }
]

我正在尝试在此图表的散点上添加标签:http://bost.ocks.org/mike/d3/workshop/dot-chart.html

我认为稍微修改这段代码会起作用,但它没有:

svg.selectAll(".dot")
  .append("text")
  .text("fooLabelsOfScatterPoints");

我正在使用像这样的d3.js JSON回调在Rails中生成一个图表:

视图

d3.json(document.URL, function(data){ 
    // generate chart
}

调节器

def index
    respond_to do |format|
        format.html do
            # return the HTML
        end
        format.json do
            # return the JSON
        end
    end
end

一切正常.但是,当用户离开此图表,然后使用其浏览器上的"后退"按钮导航回到它时,它们将显示JSON而不是HTML.

你能建议我怎么解决这个问题吗？

x.scale = d3.time.scale().domain(x.extent).range([0, dimensions.graph.width]);

此代码使用x.extent（[Wed Aug 01 2012 00:00:00 GMT+0300 (EEST), Tue Aug 07 2012 00:00:00 GMT+0300 (EEST)]）和图形宽度（1000）生成x值刻度。但是，我需要将此值四舍五入到25（Math.round(x/25)*25）的最接近倍数。

通过这样做，我想获得精确的宽度刻度，现在将其定义为：

x.axis = d3.svg.axis()
    .ticks(d3.time.days, 1)
    .tickSize(10, 5, 0)
    .scale(x.scale);

如何扩展x.scale到最接近的25的倍数？

有没有办法限制画笔的大小,即使范围更大？

我把一个只有x刻度的画笔放在一起,可以移动和调整大小.我希望能够限制用户可以调整大小的程度(基本上只能达到某一点).

在以下示例中,当画笔大于最大范围的一半时,画笔功能会停止更新.但是,刷子本身仍然可以延长.有没有办法防止这种情况发生？或者有更好的方法来处理这个问题吗？

非常感谢!

请在此处查看此代码:http://bl.ocks.org/3691274(编辑:此演示现在可用)

bar = function(range) {

      var x_range = d3.scale.linear()
          .domain([0, range.length])
          .range([0, width]); 

      svg.selectAll("rect.items").remove();

      svg.selectAll("rect.items")
          .data(range)
        .enter().append("svg:rect")
          .attr("class", "items")
          .attr("x", function(d, i) {return x_range(i);})
          .attr("y", 0)
          .attr("width",  width/range.length-2)
          .attr("height", 100)
          .attr("fill", function(d) {return d})
          .attr("title", function(d) {return d});
}

var start = 21;
bar(data.slice(0, start), true);

var control_x_range = d3.scale.linear()
    .domain([0, data.length])
    .range([0, width]); 

controlBar = svg.selectAll("rect.itemsControl")
    .data(data)
  .enter().append("svg:rect")
    .attr("class", "itemsControl")
    .attr("x", function(d, i) {return control_x_range(i);})
    .attr("y", 110)
    .attr("width",  width/data.length-2) …

我有一个svg画布,使用d3充满了有趣的数据可视化,我想在svg:rect元素上面出现一个传统的html下拉菜单.这可能吗？我意识到我可以使用foreignObject,但这与IE不兼容.

我读过许多有关类似主题的问题，但似乎没有一个答案适合我的用例（或者我真的很困惑）。

我有一个来自数据库的 csv 文件转储，我想使用此处找到的树状图示例来显示数据的层次结构http://mbostock.github.com/d3/ex/cluster.html

我的 csv 文件如下所示：

组流派、基本流派、值
地图，地图册（地理），10
目录、拍卖目录、28
没有更大的群体，学术论文，451
没有更大的组，账簿，1
没有更大的团体，离合诗，56
没有更大的组，地址，62
没有更大的团体，广告，790
没有更大的群体，寓言，35
没有更大的组，年鉴，3401
没有更大的组，字母，100
没有更大的群体，字谜，4
没有更大的团体，选集，133
没有更大的团体，反奴隶制文学，1

其中价值是该类型出版的书籍数量。

这是我根据下面的建议改编并修改的代码，也可以在http://dev.stg.brown.edu/projects/Egan/Vis/tree/tree.html找到

var width = 960,
    height = 2000;

var tree = d3.layout.tree()
    .size([height, width - 160]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var vis = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(40, 0)");

d3.csv("../data/genreNested.csv", function(csv) {

  var nodes = tree.nodes(makeTree(csv));

  var link = vis.selectAll("path.link")
      .data(tree.links(nodes))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

  var …

是否有类似Array.map()D3选择的东西？为了找到所选SVG <text/>元素的最大长度,我目前正在执行以下操作.然而,.selectAll(...)[0].map(...)对我来说似乎是一个黑客.有没有更好的办法？

      var chi = svg.selectAll('.chi');

      var xChi = d3.max(chi[0].map(function (itm) { return itm.getComputedTextLength(); }));

我可以用来selection.each()在选择上迭代一个函数,但我不知道如何将它与它结合起来d3.max().我试过了d3.max(chi.each(function (itm) { return itm.getComputedTextLength(); })),但d3.each()没有返回返回值的数组

令人惊讶的是d3.js简洁可视化数据.在这种简洁下隐藏的复杂性也使得它有点难以理解它是如何工作的.以下是http://mbostock.github.com/d3/ex/calendar.html中代码的一部分

问题是它如何在创建的svg数量内创建rect(var svg = d3 ....).在声明中svg.selectAll("rect.day"),我不确定它如何为每个svg附加rect(selectAll尝试选择rect.day!)

var margin = {top: 19, right: 20, bottom: 20, left: 19},
    width = 960 - margin.right - margin.left, // width
    height = 136 - margin.top - margin.bottom, // height
    cellSize = 17; // cell size

var day = d3.time.format("%w"),
    week = d3.time.format("%U"),
    percent = d3.format(".1%"),
    format = d3.time.format("%Y-%m-%d");


var svg = d3.select("#chart").selectAll("svg")
    .data(d3.range(1990, 2011))
  .enter().append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
    .attr("class", "RdYlGn")
  .append("g") …