Question

我一直在关注D3.js上的几篇教程/文章，以创建一个带有追溯类型功能的条形图。我的工作方式几乎是我想要的，但有一个我似乎无法解决的问题。

我有一个我在这里工作的例子（这是我正在处理的主要版本的缩减版本，只是为了显示问题）：http://jsfiddle.net/MattFrewin/bobec00k/1/

您可以看到初始条形图显示“A＆A”组的1个栏，您可以单击此栏以深入查看下一组数据 - 显示3条数据。问题是新的酒吧都略显不合适。您会注意到我正在使用图表轴的边距来抵消条形图，而我可以告诉它这是在新条形图上没有考虑到的。以下是我认为存在问题的代码：

//Create bars
chartBarData.enter()
  .append("rect")
    .attr({
        "x": function (d) { return xScale(d.key); },
        "y": height,
        "width": xScale.rangeBand(),
        "height": 0,
        "fill": function (d) { return "rgb(0, 130, 0)"; }
    })
    .transition().delay(animDur).duration(animDur)
    .attr({
        "x": function (d) { return xScale(d.key); },
        "y": function (d) { return yScale(d.values.count); },
        "width": xScale.rangeBand(),
        "height": function (d) { return height - yScale(d.values.count); },
        "fill": function (d) { return "rgb(0, 130, 0)"; }
    });

我已经找到了解决方法，将边距放入＆＃39; x＆＃39;并且＆＃39; y＆＃39; ＆＃39; rect＆＃39;的一部分属性，但这进一步钻进数据时会导致更多类似的问题。我确定有一些明显的东西我不知道或者可能只是完全不了解D3！任何帮助表示赞赏。

编辑：我还应该补充说D3＆＃39;更新＆＃39;部分似乎工作正常，使用与“输入”相同的比例。部分 - 令人困惑！正如您将在jsfiddle链接上看到的那样，当您钻取时，第一个栏正确排列，但其他两个栏没有。

Answer 1

似乎条形图未插入正确的位置，在chart_drilldown函数中尝试替换：

var chartBarData = theChart.selectAll("rect")
        .data(groupedData);

与

var chartBarData = theChart.select("g").selectAll("rect")
        .data(groupedData);

Modified JSFiddle

D3.js条形图＆＃39;输入＆＃39;似乎将新栏杆绘制在错误的位置

1 个答案: