Question

这是我正在尝试做的事情：我有一个对象数组，有几个有趣的属性。我要做的是构建一个应用程序，用户可以在其中选择一个属性的名称，相关数据显示在条形图中。用户应该能够点击特定的栏，这应该改变它的颜色。

所以基本上我有这个功能

function updateBarChart(propertyName)

这是此功能的总结内容：

它将条形图的数据绑定到我的数据（数据始终相同）：

const bars = d3.select("#barchart")
    .selectAll("rect")
    .data(data);

新的矩形样式正确：

const bars2 = bars.enter()
    .append('rect')
    .attr(attrs);

我认为吧2常数不一定是必要的，但正如你所看到的，它是。

当前的条形图样式正确：

bars.attr(attrs)

删除旧条：

bars.exit().remove();

现在是事件处理部分，在我看来应该工作的那部分，在这里我评论的行不能像我期望的那样工作：

bars.on('click', function() { //1
    console.log(propertyName); //2
    bars.attr('fill', oldColor); //3
    d3.select(this).attr('fill', differentColor);
}

现在出现问题：

// 1 =＆gt;这里吧不起作用，如果我使用bars2而不是它的工作原理。那是为什么？

// 2 =＆gt;当用户更改select属性时，propertyName不会更改。当用户更改所选属性时，是否应取消注册并再次注册click事件处理程序？我该怎么做？那是为什么？

// 3 =＆gt;在这里，如果我使用像示例中的条，它不起作用。我需要做的是用d3.select（“＃barchart”）替换bar。selectAll（'rect'）。再一次，为什么会这样？

我不确定我是否理解d3是如何工作的，所以如果这个问题看起来有点像“免费教我d3”，我很抱歉。

如何使D3事件处理条形图中的动态元素？

0 个答案: