javascript - D3 函数(d,i) 回调跳过第一项

Question

我在使用 D3 时遇到了非常奇怪的问题。它正在跳过数据数组中的第一项。

我有非常简单的代码

function getRandomValue(from, to) {
  return Math.floor(Math.random() * (to - from + 1)) + from;
}

var data = [];

for (var i = 0; i < 1000; i++) {
  data.push(getRandomValue(0, 1000));
}

var getValueCallback = (item) => item;

var domain = [
  d3.min(data, getValueCallback),
  d3.max(data, getValueCallback)
];
var colors = [];

var colorRange = d3.scale.linear()
  .domain(domain)
  .range(['red', 'blue']);

var ticks = colorRange.ticks(5);

var legend = d3.select('g.legend')
  .selectAll('g')
  .data(ticks)
  .enter()
  .append('g')
  .attr('class', 'legend-item');

var height = 100;
var rectW = 20;
var rectH = 20;

legend.append('rect')
  .attr('x', 20)
  .attr('y', (d, i) => height - ((i + 2) * rectH))
  .attr('width', rectW)
  .attr('height', 20)
  .style('fill', (d, i) => colorRange(d));

在 jsfiddle 上运行得非常好: https://jsfiddle.net/klinki/k0m4p6b3/

但在我的应用程序中不起作用。 http://klinki.cz/floorplan/angular/viewer.html

(这几乎是相同的代码，正如您在此处看到的:)

http://klinki.cz/floorplan/angular/dist/js/app/Components/HeatmapScale/HeatmapScale.js

我的应用程序正在使用 jQuery、Angular2、RxJS 和一堆其他库(主要是 Angular2 依赖项)。

我猜其中一些库一定会以某种方式干扰 D3，但我不知道哪个库会导致这样的问题:(

更新:

这是我的错，我错过了 svg 代码中导致问题的差异。抱歉 Angular 2 将这些问题归咎于您:-)

Answer 1

您的选择是错误的:

var legend = d3.select('g.legend')
  .selectAll('g')//get all group with .legend 
  .data(ticks)
  .enter()
  .append('g')
  .attr('class', 'legend-item');

这将选择该组并将第一个数据绑定(bind)到它:

<g class="heatmap"></g>

现在，对于其余数据，它将按类别 legend-item 进行分组

正确的做法应该是:

var legend = d3.select('g.legend')
  .selectAll('legend-item')
  .data(ticks)
  .enter()
  .append('g')
  .attr('class', 'legend-item');

在 jsfiddle 中你没有群组 <g class="heatmap"></g>在图例中，所以它有效。

希望这能解决您的问题:)