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

D3: How can I change data in an existing bar chart

本文关键字：条形图 数据 何更改 D3      更新时间：2023-09-26

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

这是我的代码：

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，然后将其删除，但您可以对其进行修改以获得您想要的效果。

相关文章：