Javascript D3：如何更改现有条形图中的数据

我已经成功地构建了我的初始条形图。现在，我想使用转换在现有图表中添加更多的条形图，以获得良好的用户体验

这是我的密码：

var data = [23, 85, 67, 38, 70]; //dummy, normally much more
labellist = ['label1','label2','label3','label4','label5'];

var w = 815,
    h = 500,
    labelpad = 165,
    x = d3.scale.linear().domain([0, 100]).range([0, w]),
    y = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, h], .2);

mySvg = d3.select("#chart")
  .append("svg");

vis = mySvg.attr("width", w + 40)
    .attr("height", h + 20)
    .append("svg:g")
    .attr("transform", "translate(20,0)");

bars = vis.selectAll("g.bar")
    .data(data)
    .enter().append("svg:g")
    .attr("class", "bar")
    .attr("transform", function(d, i) { return "translate(" + labelpad + "," + y(i) + ")"; })


bars.append("svg:rect")

    .transition()
    .duration(500)
    .attr("width", x)
    .attr("height", y.rangeBand())
    ;



var rules = vis.selectAll("g.rule")
    .data(x.ticks(10))
  .enter().append("svg:g")
    .attr("class", "rule")
    .attr("transform", function(d) { return "translate(" + x(d) + ", 0)"; });

rules.append("svg:line")
    .attr("y1", h)
    .attr("y2", h + 6)
    .attr("x1", labelpad)
    .attr("x2", labelpad)
    .attr("stroke", "black");
rules.append("svg:line")
    .attr("y1", 0)
    .attr("y2", h)
    .attr("x1", labelpad)
    .attr("x2", labelpad)
    .attr("stroke", "white")
    .attr("stroke-opacity", .3);

---

如何以编程方式更改数据以添加和删除其他条形图，并让现有条形图向上/向下滑动？

您需要为条形图的数据分配某种形式的键，以便d3可以识别上一组中存在的条形图。默认值是基于索引的，这可能是您想要的

就转换而言，您希望将代码更改为以下内容：

bars = vis.selectAll("g.bar")
    .data(data);

bars.enter().append("svg:g")
    .attr("class", "bar")
    .append("svg:rect").

bars.transition().duration(500)
    .attr("transform", function(d, i) { 
         return "translate(" + labelpad + "," + y(i) + ")"; 
     })
    .selectAll("svg:rect")
    .attr("width", x)
    .attr("height", y.rangeBand())
;

bars.exit().transition().duration(500)
    .selectAll("svg:rect")
    .attr("height", 0)
    .remove();

最好使用“enter（）”函数立即创建结构。然后使用初始选择对象（条形图）将新数据应用于所有图元

---

您可能还希望删除任何过时的条。在这里，我将它们的大小调整为0，然后将其删除，但您可以对其进行修补以获得所需的效果

谢谢你的回答，我是d3新手-你知道有任何教程或例子显示你提到的键的使用吗？我的updateChart（）函数是什么样的？当我尝试转换代码时，图表不会显示，我在d3_selection（groups）的d3.v2.js中得到一个“Uncaught Error:SYNTAX_ERR:DOM Exception 12”（我已经在第二次调用中修复了您的输入错误，句号而不是分号），我还没有运行此代码，因此可能还有其他问题。我只是想向您展示使用enter/exit函数添加/删除元素的想法。这是一个很好的条形图，展示了如何很好地添加条形图：