动态更新d3条形图

Question

此功能在页面加载时以及在以表格形式输入数据时运行。 它可以在页面加载时很好地绘制图形，但是在提交新信息时不会重绘。

当我在数据连接后记录元素时，它显示了数据数组的更新长度和元素的更新数量，但是它们不会重绘。 有什么想法，只是扫描这段代码？ 我感觉它已经接近了，但是我不理解数据更新过程的步骤。

这是基于基本的条形图教程的， 让我们制作一个条形图 ，该条形图使用div而不是svg元素，但是我认为这并不重要。

this.render = function(self){
  if(self.data){
    self.x = d3.scaleLinear()
               .domain([0, d3.max(self.data.map(function(d) {
                   return parseInt(d.daily_count);
                 }))
               ])
               .range([0, 500]);

    var bars = d3.select("#chart")
                 .selectAll("div")
                 .data(self.data)
                 .enter().append('div')
                   .attr('class', 'bar-container row');

    console.log('chart', d3.select("#chart").data(self.data));

    bars.append('div')
          .attr('class', 'label four columns')
          .text(function(d) {return d.date_string; });

    bars.append("div")
          .attr('class', 'bar eight columns')
          .style('background-color', function(d){
            return (d.daily_count == 0 ? 'white' : '#1EAEDB')
          })
          .style('color', function(d){
            return (d.daily_count == 0 ? 'red' : 'white')
          })
          .style("width", function(d) {
            return self.x(d.daily_count) + "px";
          })
          .text(function(d) {
            return (d.daily_count == 0 ? 'closed' : d.daily_count)
          });
  }

编辑：尝试使用.merge（）和.each（）创建和更新图表。 我无法弄清楚如何动态更新，其中每个条形图是一个div，其中包含两个实际显示数据的子div。 尽管它像上面那样呈现，但是它仍然不能动态工作：

this.render = function(self){
  if(self.data){
    self.x = d3.scaleLinear()
               .domain([0, d3.max(self.data.map(function(d) {
                   return parseInt(d.daily_count);
                 }))
               ])
               .range([0, 500]);

    var chart = d3.select("#chart");

    var bars = chart.selectAll("d")
                 .data(self.data)

    bars.enter().append('div')
        .attr('class', 'bar-container row')
        .each(function(d) {
          d3.select(this).append('div')
            .attr('class', 'label four columns');
          d3.select(this).append('div')
            .attr('class', 'bar eight columns');
        })
        .merge(bars)
        .each(function(d){
          d3.select(this).selectAll('div.label')
            .text(function(d) {return d.date_string; });
          d3.select(this).selectAll('div.bar')
            .style('background-color', function(d){
              return (d.daily_count == 0 ? 'white' : '#1EAEDB')
            })
            .style('color', function(d){
              return (d.daily_count == 0 ? 'red' : 'white')
            })
            .style("width", function(d) {
              return self.x(d.daily_count) + "px";
            })
            .text(function(d) {
              return (d.daily_count == 0 ? 'closed' : d.daily_count)
            });
        })

    bars.exit().remove();

Answer 1

您的render功能需要正确的“输入”，“更新”和“退出”选择。 除此之外，请记住，您链接的Bostock的示例使用的是d3版本3.x，而您使用的是d3版本4.x。

在下面的演示中，这将绑定数据：

var bars = body.selectAll("div")
    .data(data);

之后，通过merge进行“输入”和“更新”选择：

bars.enter().append("div")
    .attr("class", "row")
    .merge(bars)
    .style('background-color', function(d){
        return (d.daily_count == 0 ? 'white' : '#1EAEDB')
    })
    .style('color', function(d){
        return (d.daily_count == 0 ? 'red' : 'white')
    })
    .style("width", function(d) {
        return x(d.daily_count) + "px";
    })
    .text(function(d) {
        return (d.daily_count == 0 ? 'closed' : d.daily_count)
    });

和出口选择：

bars.exit().remove();

这是一个基于您的代码的演示（仅使用daily_count ，因为我不知道您如何daily_count其他div）：

 var dataset = [{daily_count: 19}, {daily_count: 29}, {daily_count: 13}, {daily_count: 45}, {daily_count: 22}, {daily_count: 42}, {daily_count: 9}]; render(dataset) d3.select("#btn").on("click", function(){ var newDataset = []; var length = Math.ceil(Math.random()*20); for (var i = 0; i < length; i++){ newDataset.push({daily_count: Math.floor(Math.random()*50)}) } render(newDataset); }) function render(data){ x = d3.scaleLinear() .domain([0, d3.max(data.map(function(d) { return parseInt(d.daily_count); })) ]) .range([0, 300]); var body = d3.select("body"); var bars = body.selectAll("div") .data(data); bars.enter().append("div") .attr("class", "row") .merge(bars) .style('background-color', function(d){ return (d.daily_count == 0 ? 'white' : '#1EAEDB') }) .style('color', function(d){ return (d.daily_count == 0 ? 'red' : 'white') }) .style("width", function(d) { return x(d.daily_count) + "px"; }) .text(function(d) { return (d.daily_count == 0 ? 'closed' : d.daily_count) }); bars.exit().remove(); } 

 .row { font: 10px sans-serif; text-align: right; padding: 3px; margin: 2px; color: white; } 

 <script src="https://d3js.org/d3.v4.min.js"></script> <button id="btn">Click</button>