javascript - d3 直方图和条形图数据

Question

我目前正在创建一个条形图，从 d3 直方图中获取数据。

我像这样创建直方图:

var binningThresholds = d3.range(getMinValue(rows, 'Model year'), getMaxValue(rows, 'Model year') + 2)

var histogram = d3.layout.histogram()
    .value(getModelYear)
    .bins(binningThresholds)
    (rows);

我从 csv 输入中获取行。我已经对输入做了很多事情，所以效果很好。

直方图现在是一个对象数组的数组。

当我现在想要使用此直方图并向图表中的数组中的每个索引添加一个条形图时，不会显示任何错误，并且 d3 不会附加任何g 、 rect 或 text 标记到 DOM。

var histogramBars = histogramSvg.selectAll('g')
    .data(histogram)
    .enter()
    .append('g');

histogramBars.append('rect');

histogramBars.append('text')
    .text(function(d) {
        return d.length;
    })

我真的不知道为什么，有人看到错误吗？

Answer 1

不要使用 .selectAll('g').data...，我的猜测是您的可视化中还有其他 g 元素，并且您正在选择内容你不是故意的。相反，做类似的事情:

var histogramBars = histogramSvg.selectAll('.myUniqueClass')
  .data(histogram)
  .enter()
  .append('g')
  .attr('class', 'myUniqueClass');