3

我带来了一些符合 D3 标准的代码。但现在我的更新功能出现问题。我正在尝试遵循General Update Pattern。

当我运行该函数时，控制台中出现错误："TypeError: gbars.enter(...).attr is not a function"

function updateBars()
{   
   xScale.domain(d3.range(dataset.length)).rangeRoundBands([0, w], 0.05);
   yScale.domain([0, d3.max(dataset, function(d) { return (d.local > d.global) ? d.local : d.global;})]); 


   var gbars = svg.selectAll("rect.global")
       .data(dataset);

   gbars.enter()
       .attr("x", w)
       .attr("y", function(d) {return h - yScale(d.global); })
       .attr("width", xScale.rangeBand())
       .attr("height", function(d) {return yScale(d.global);});

   gbars.transition()
       .duration(500)
       .attr("x", function(d, i) {
        return xScale(i);
       })
       .attr("y", function(d) {
        return h - yScale(d.global);
       })
       .attr("width", xScale.rangeBand())
       .attr("height", function(d) {
        return yScale(d.global);
       });

   gbars.exit()
       .transition()
       .duration(500)
       .attr("x", -xScale.rangeBand())
       .remove();
}

我明白了，我一般来说更新功能可能有很多错误，但是刚开始挂断时很难排除故障。

我的更新目标是从图表中删除/添加系列。他们可以选择显示全局、本地或两者（默认）。我实际上更喜欢当他们将鼠标悬停在图例上时，它只显示该系列。在鼠标移出时，它将恢复为默认值。

在这里工作小提琴。

4

1 回答 1

3

你需要说出你想为新节点做什么。是的，它几乎总是附加，但你仍然必须告诉它：

   gbars.enter()
       .append("rect")
       .attr("class", "global")
       .attr("x", w)

除了该错误之外，您的一般更新模式的结构在表面上看起来是正确的。

于 2013-04-30T20:18:22.957 回答