更新d3.js中数据更改的图表

Question

嗨，我正在使用以下代码通过使用服务调用中的数据来基本上创建条形图。 问题在于服务调用中的数据发生变化，它没有反映在条形图中，而是保持其原始状态。 Appname和Appcount是我从服务电话获得的两件事

jQuery(function($) 
{
Appnames = []//array will be populated from service call,
  Appcount = []//array will be populated from serv`enter code here`ice call,
  chart,
  width = 700,
  bar_height = 40,
  gap = 2,
  height = bar_height * Appnames.length;
  var margin = {top: 20, right: 120, bottom: 20, left: 120};

  /* step 1 - create the background*/
  chart = d3.select($("#step-1")[0])
.append('svg')
.attr('class', 'chart')
.attr('width', width)
.attr('height', height);

  /* step 2 - create the bars*/
  var x, y;

 chart = d3.select($("#step-2")[0])
.append('svg')
.attr('class', 'chart')
.attr('width', width + margin.right + margin.left)
.attr('height', height);

 x = d3.scale.linear()
 .domain([0, d3.max(Appcount)])
 .range([0, width]);

 y = function(i) { return bar_height * i; }

 chart.selectAll("rect")
 .data(Appcount)
 .enter().append("rect")
 .attr("x", 0)
 .attr("y", function(d, i) { return y(i);})
 .attr("width", x)
 .attr("height", bar_height);

  /* step 3 - add counts to the bars*/
chart = d3.select($("#step-3")[0])
.append('svg')
.attr('class', 'chart')
.attr('width', width)
.attr('height', height);

 chart.selectAll("rect")
.data(Appcount)
.enter().append("rect")
.attr("x", 0)
.attr("y", function(d, i) { return y(i);})
.attr("width", x)
.attr("height", bar_height);

 chart.selectAll("text")
.data(Appcount)
.enter().append("text")
.attr("x", x)
.attr("y", function(d, i){ return y(i) + bar_height/2; } )
.attr("dx", -5)
.attr("dy", ".36em")
.attr("text-anchor", "end")
.text(String);

 /* step 4 - add Appnames to bars*/
 var left_width = 100;

chart = d3.select($("#step-4")[0])
.append('svg')
.attr('class', 'chart')
.attr('width', left_width + width)
.attr('height', height);

chart.selectAll("rect")
.data(Appcount)
.enter().append("rect")
.attr("x", left_width)
.attr("y", function(d, i) { return y(i);})
.attr("width", x)
.attr("height", bar_height);

chart.selectAll("text.score")
.data(Appcount)
.enter().append("text")
.attr("x", function(d) { return x(d) + left_width; })
.attr("y", function(d, i) { return y(i) + bar_height / 2;})
.attr("dx", -5)
.attr("dy", ".36em")
.attr("text-anchor", "end")
.attr('class', 'score')
.text(String);

 chart.selectAll("text.name")
.data(Appnames)
.enter().append("text")
.attr("x", left_width / 2)
.attr("y", function(d, i){ return y(i) +bar_height/2; } )
.attr("dy", ".36em")
.attr("text-anchor", "middle")
.attr('class', 'name')
.text(String);

 /* step 5 - add a ruler line to the bars*/
 var gap = 2, yRangeBand;
// redefine y for adjusting the gap
yRangeBand = bar_height + 2 * gap;
y = function(i) { return yRangeBand * i; };

chart = d3.select($("#step-5")[0])
.append('svg')
.attr('class', 'chart')
.attr('width', left_width + width + 40)
.attr('height', (bar_height + gap * 2) * Appnames.length + 30)
.append("g")
.attr("transform", "translate(10, 20)");

chart.selectAll("line")
.data(x.ticks(d3.max(Appcount)))
.enter().append("line")
.attr("x1", function(d) { return x(d) + left_width; })
.attr("x2", function(d) { return x(d) + left_width; })
.attr("y1", 0)
.attr("y2", (bar_height + gap * 2) * Appnames.length);

chart.selectAll(".rule")
.data(x.ticks(d3.max(Appcount)))
.enter().append("text")
.attr("class", "rule")
.attr("x", function(d) { return x(d) + left_width; })
.attr("y", 0)
.attr("dy", -6)
.attr("text-anchor", "middle")
.attr("font-size", 10)
.text(String);

 chart.selectAll("rect")
.data(Appcount)
.enter().append("rect")
.attr("x", left_width)
.attr("y", function(d, i) { return y(i) + gap; })
.attr("width", x)
.attr("height", bar_height);

 chart.selectAll("text.score")
.data(Appcount)
.enter().append("text")
.attr("x", function(d) { return x(d) + left_width; })
.attr("y", function(d, i) { return y(i) + yRangeBand/2;})
.attr("dx", -5)
.attr("dy", ".36em")
.attr("text-anchor", "end")
.attr('class', 'score')
.text(String);

 chart.selectAll("text.name")
.data(Appnames)
.enter().append("text")
.attr("x", left_width / 2)
.attr("y", function(d, i){ return y(i) + yRangeBand/2; } )
.attr("dy", ".36em")
.attr("text-anchor", "middle")
.attr('class', 'name')
.text(String); }(jQuery));

Answer 1

d3使用输入，更新和退出模式 。 您的代码仅处理enter状态。 将其拆分以处理所有3种状态：

var rects = chart.selectAll("rect")
  .data(Appcount); //<-- create your data join

rects.enter().append("rect"); //<-- ENTER - when data enters the join append a rect element to dom

rects.exit().remove(); //<-- EXIT - when data leaves the join, remove the rect

rects.attr("x", 0) //<-- UPDATE - update the rects based on data
  .attr("y", function(d, i) { return y(i);})
  .attr("width", x)
  .attr("height", bar_height);