javascript - 动态更新d3条形图

Question

此函数在页面加载时运行，也在表单中输入数据时运行。它在页面加载时很好地绘制了图表，但在提交新信息时不会重新绘制。

当我在数据连接后记录元素时，它显示数据数组的更新长度和元素数量，但它们不会重绘。有什么想法吗，只需扫描此代码即可？我觉得已经很接近了，但我不明白数据更新过程的步骤。

这是基于基本条形图教程 let's make a bar chart ，它使用 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。

在下面的演示中，这会绑定(bind)数据:

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();

这是一个基于您的代码的演示(仅使用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>