Question

我尝试使用两个下拉菜单制作d3散点图。下拉菜单用于选择要相互映射的数据集。我使用两个全局变量来跟踪当前使用的数据集。＆＃34; currentX＆＃34;是第一个数据集的名称（在x轴上）和＆＃34; currentY＆＃34;是第二个数据集的名称。

我的比例函数取决于＆＃34; currentX＆＃34;的值。和＆＃34; currentY＆＃34;。以下是我的xScale函数示例：

var xScale = d3.scale.linear()
.domain([d3.min(dataset, function(d){return d.data[currentX]}), d3.max(dataset, function(d){return d.data[currentX]})
.range([padding, w - padding])
.nice();

我的yScale功能相同，但使用currentY而不是currentX。我的问题是，当我尝试更改数据视图时，我的比例不会更新。以下是在数据视图之间切换的代码：

d3.selectAll('select')
.on('change', function() {

// Update currentX and currentY with the currently selected datasets
key = Object.keys(dataset[0].data)[this.selectedIndex];
if (this.getAttribute('id') == 'xSelect') {currentX = key}
if (this.getAttribute('id') == 'ySelect') {currentY = key}

// Change data used in the scatterplot
svg.selectAll('circle')
.data(dataset)
.transition()
.duration(1000)
.attr('cx', function(d) { return xScale(d.data[currentX]) })
.attr('cy', function(d) { return yScale(d.data[currentY]) })
.attr('r', 2)
};

我希望更新xScale和yScale函数，以反映currentX和currentY的新值。但由于某种原因，这些功能没有更新。如果有人能帮我解决这个问题，我真的很感激！谢谢！

更新：为了澄清，我的问题是我的xScale和yScale函数没有改变，即使xCurrent和yCurrent（及其最小值和最大值）已经改变。例如，＆＃34; console.log（xScale（-5））＆＃34;总是产生相同的价值。当xCurrent和yCurrent改变时，该值应该改变！再次感谢。

更新2：全局变量＆＃34; xCurrent＆＃34;和＆＃34; yCurrent＆＃34;正在更新。此外，如果我在.on（＆＃39;更改＆＃39;）函数中定义NEW xScale和yScale函数，则会更新我的比例。这实际上解决了我的问题，但我仍然想知道为什么我不能这样做。还在努力学习D3！

Answer 1

您需要更新更改功能中的x比例域。此外，您可以使用d3.extent代替d3.min和d3.max。例如：

.on('change', function () {
  // Update currentX and currentY with the currently selected datasets
  key = Object.keys(dataset[0].data)[this.selectedIndex];
  if (this.getAttribute('id') == 'xSelect') {currentX = key}
  if (this.getAttribute('id') == 'ySelect') {currentY = key}

  xScale.domain(d3.extent(dataset, function(d){return d.data[currentX];}));

  // Change data used in the scatterplot
  svg.selectAll('circle')
    .data(dataset)
    .transition()
    .duration(1000)
    .attr('cx', function(d) { return xScale(d.data[currentX]) })
    .attr('cy', function(d) { return yScale(d.data[currentY]) })
    .attr('r', 2)
})

这是因为比例生成器不知道您的数据发生了变化。每次数据更改时都不会调用domain方法。因此，当数据发生变化时，您必须在重新绘制任何依赖于它的数据之前显式设置比例的域。

d3 - xScale没有更新？

1 个答案: