D3如何在从下拉菜单中选择新数据后更新图表

Question

我正在D3中构建一个瀑布图。当页面加载时，它将呈现默认页面，但用户可以从下拉菜单中选择不同的“公司”和“年份”。我已经能够创建我想要的图表了。但是当我选择任何不同的公司或年份时，D3会在现有图表的基础上添加另一个图表，而不是替换它，这是因为我的目标是HTML中的特定div / svg。我如何使用D3用新数据更新图表，而不是添加另一个top？如果我能让图表条的移动带有过渡效果，那就太棒了。

超文本标记语言是一个简单的svg：

<svg class="chart"></svg>

这是创建Ajax调用成功时我调用的图表的函数：

function waterfallChart (dataset) {

            var data = [];

            for (var key in dataset[0]) {
              data.push({
                name: key,
                value: dataset[0][key]
              })
            }

        var margin = {top: 20, right: 30, bottom: 30, left: 40},        
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom,
            padding = 0.3;

    var x = d3.scaleBand()
            .domain(data.map(function(d) {
                return d.name
                }))
            .range([0, width])
            .padding(padding);

    var y = d3.scaleLinear()
        .range([height, 0]);

    var xAxis = d3.axisBottom(x)


    var yAxis = d3.axisLeft(y)
        .tickFormat(function(d) {
            return dollarFormatter(d);
        });

    var chart = d3.select(".chart")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var cumulative = 0;
        for (var i = 0; i < data.length; i++) {
            data[i].start = cumulative;
            cumulative += data[i].value;
            data[i].end = cumulative;

            data[i].class = (data[i].value >= 0) ? 'positive' : 'negative'
        }
        data.push({
            name: 'Total',
            end: cumulative,
            start: 0,
            class: 'total'
        });

        x.domain(data.map(function(d) {
            return d.name;
        }));
        y.domain([0, d3.max(data, function(d) {
            return d.end;
        })]);

        chart.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        chart.append("g")
            .attr("class", "y axis")
            .call(yAxis);

        var bar = chart.selectAll(".bar")
            .data(data)
            .enter().append("g")
            .attr("class", function(d) {
                return "bar " + d.class
            })
            .attr("transform", function(d) {
                return "translate(" + x(d.name) + ",0)";
            });

        bar.append("rect")
            .attr("y", function(d) {
                return y(Math.max(d.start, d.end));
            })
            .attr("height", function(d) {
                return Math.abs(y(d.start) - y(d.end));
            })
            .attr("width", x.bandwidth());

        bar.append("text")
            .attr("x", x.bandwidth() / 2)
            .attr("y", function(d) {
                return y(d.end) + 5;
            })
            .attr("dy", function(d) {
                return ((d.class == 'negative') ? '-' : '') + ".75em"
            })
            .text(function(d) {
                return dollarFormatter(d.end - d.start);
            });

        bar.filter(function(d) {
                return d.class != "total"
            }).append("line")
            .attr("class", "connector")
            .attr("x1", x.bandwidth() + 5)
            .attr("y1", function(d) {
                return y(d.end)
            })
            .attr("x2", x.bandwidth() / (1 - padding) - 5)
            .attr("y2", function(d) {
                return y(d.end)
            })

            function dollarFormatter(n) {
                  n = Math.round(n);
                  var result = n;
                  if (Math.abs(n) > 1000) {
                    result = Math.round(n/1000) + 'B';
                  }
                  return '$ ' + result;
                }
        }

下面是我有事件侦听器的代码，在选择时它将运行上述函数：

$("#airline-selected, #year-selected").change(function chartsData(event) {
            event.preventDefault();
            var airlineSelected = $('#airline-selected').find(":selected").val();
            var yearSelected = $('#year-selected').find(":selected").val();

            $.ajax({
                url: "{% url 'airline_specific_filtered' %}",
                method: 'GET',
                data : {
                    airline_category: airlineSelected,
                    year_category: yearSelected
                        },
                success: function(dataset){
                        waterfallChart(dataset)
         },
                error: function(error_data){
                console.log("error")
                console.log(error_data)
         }
            })
        });

Answer 1

你在这里错过了一些非常重要的东西。如果要对数据进行更新，则需要执行一些操作。

>

为＜code＞data（）

.data(data, function(d) { return d.name })

现在，假设＜code＞d，d3将能够区分数据项。名称是唯一标识符。

您需要为更新期间删除的数据提供 exit（）。您需要保存数据联接选择，以便可以对其调用 enter 和 exit：

var bar = chart.selectAll(".bar")
          .data(data, function(d) { return d.name})

现在您可以调用：bar.exit（）。删除（）来删除已删除的项目，调用bar.enter（）来添加项目。

您需要选择一个没有调用< code>enter()来更新属性的选项。

可能更多的是样式问题，但您应该在更新函数之外设置SVG和边距，因为它们的状态相同。您仍可以通过在更新中调用相应的函数来更新轴和缩放。

你发布的代码对其他人来说有点难运行—

下面是一个示例，根据您的代码在两个数据集之间更新setInterval。但是您还应该看看一般的更新模式——它们非常简单，但几乎包含了您需要了解的所有内容。(https://bl.ocks.org/mbostock/3808234)

dataset = [
        {name: "Albert", start: 0, end:220},
        {name: "Mark", start: 0, end:200},
        {name: "Søren", start: 0, end:100},
        {name: "Immanuel", start: 0, end:60},
        {name: "Michel", start: 0, end:90},
        {name: "Jean Paul", start: 0, end: 80}
    ]
     dataset2 = [
        {name: "Albert", start: 0, end:20},
         {name: "Immanuel", start:0, end:220},
        {name: "Jaques", start: 0, end:100},
        {name: "Gerhard", start:0 , end:50},
        {name: "Søren", start: 0, end:150},
        {name: "William", start: 0, end: 180}
    ]

var margin = {
    top: 10,
    right: 30,
    bottom: 30,
    left: 40
  },
  width = 400 - margin.left - margin.right,
  height = 200 - margin.top - margin.bottom,
  padding = 0.3;

var chart = d3.select(".chart")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand()
  .range([0, width])
  .padding(padding);

var y = d3.scaleLinear()
  .range([height, 0])

chart.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
chart.append("g")
  .attr("class", "y axis")

var currentData = dataset

waterfallChart(currentData)

setInterval(function() {
  currentData = currentData === dataset ? dataset2 : dataset
  waterfallChart(currentData)
}, 3000)

function waterfallChart(data) {
  var t = d3.transition()
    .duration(750)

  x.domain(data.map(function(d) {
    return d.name
  }))
  y.domain([0, d3.max(data, function(d) {
    return d.end
  })])
  var xAxis = d3.axisBottom(x)

  var yAxis = d3.axisLeft(y)

  d3.select('g.x').transition(t).call(xAxis)
  d3.select('g.y').call(yAxis)

  var bar = chart.selectAll(".bar")
    .data(data, function(d) {
      return d.name
    })

  // ENTER -- ADD ITEMS THAT ARE NEW IN DATA
  bar.enter().append("g")
    .attr("transform", function(d) {
      return "translate(" + x(d.name) + ",0)"
    })
    .attr("class", 'bar')
    .append("rect")
    .attr("y", function(d) {
      return y(Math.max(d.start, d.end));
    })
    .attr("height", function(d) {
      return Math.abs(y(d.start) - y(d.end));
    })
    .attr("width", x.bandwidth())

  // UPDATE EXISTING ITEMS
  chart.selectAll(".bar")
    .transition(t)
    .attr("transform", function(d) {
      return "translate(" + x(d.name) + ",0)"
    })
    .select('rect')
    .attr("y", function(d) {
      return y(Math.max(d.start, d.end))
    })
    .attr("height", function(d) {
      return Math.abs(y(d.start) - y(d.end))
    })
    .attr("width", x.bandwidth())

  // REMOVE ITEMS DELETED FROM DATA
  bar.exit().remove()
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg class="chart"></svg>