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');

这将选择组并将第一个数据绑定到它：

<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>，所以它可以工作。

希望这可以解决您的问题：）

D3功能（d，i）回调跳过第一项

1 个答案: