Question

更新数据时，d3仅添加行，不会进行更新或删除。

我现在在我的代码，d3文档（V4），d3教程和论坛中搜索了几个小时，但没有弄清楚为什么我的代码无法正常工作。

我将代码深入到最低限度并标记了更新部分：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <form id="form">
      <select id="ddmSel" required>
        <option value="0">TS1</option>
        <option value="1">TS2</option>
        <option value="2">TS3</option>
      </select>
      <input id="btnSubmit" type="submit" />
    </form>

    <script type="text/javascript">
        var aTS = [
                    [
                        {"id":1, "DT": "2017-08-01", "val":1},
                        {"id":1, "DT": "2017-08-02", "val":3},
                        {"id":2, "DT": "2017-08-01", "val":6},
                        {"id":2, "DT": "2017-08-02", "val":2},
                        {"id":3, "DT": "2017-08-01", "val":4},
                        {"id":3, "DT": "2017-08-02", "val":5}
                    ],
                    [
                        {"id":4, "DT": "2017-08-03", "val":8},
                        {"id":4, "DT": "2017-08-04", "val":7}
                    ],
                    [
                        {"id":5, "DT": "2017-08-04", "val":10},
                        {"id":5, "DT": "2017-08-05", "val":12},
                        {"id":6, "DT": "2017-08-04", "val":11},
                        {"id":6, "DT": "2017-08-05", "val":9}
                    ],
                  ]

        //update chart
        $(function() {
          $('#form').submit(function(event) {

            //format data
            aTS[$('#ddmSel').val()].forEach(function (d) { d.DT = d3.isoParse(d.DT); });
            var dataraw = aTS[$('#ddmSel').val()];

            //brute force works
            //$("svg").find("*").remove();
            //initlineChart();

            //set scale ranges
            xScale.domain(d3.extent(dataraw, function (d) { return d.DT; }));
            yScale.domain([0, d3.max(dataraw, function (d) { return d.val; })]);


            //add key for each id -> [key:id, values:[data]]
            var data = d3.nest().key(function (d) { return d.id }).entries(dataraw);

//this does not work properly: only enter works, no update, no remove

            //bind data to DOM
            var ts = g.selectAll("ts")
              .data(data)

            //enter elements
            ts.enter().append("path")
                .merge(ts) //enter & update elements
                .attr("class", "ts")
                .attr("d", function (d) { return line(d.values); })
                .attr("fill", "none")
                .attr("stroke-width", 1)
                .style("stroke", function (d) { return colorScale(d.key); });

            //remove elements
            ts.exit().remove();         
//until here        

            event.preventDefault();
          });
        });


        function initlineChart() {
            svgHeight = 500,
            svgWidth = 960,
            margin = { top: 20, right: 20, bottom: 30, left: 50 },

            //add svg to DOM
            d3.select("body").append("svg")
                    //.attr("class", "svg1")
                    .attr("height", svgHeight)
                    .attr("width", svgWidth)

            //get svg
            svg = d3.select("svg"),

            //set chartFrame
            chartWidth = svg.attr("width") - margin.left - margin.right,
            chartHeight = svg.attr("height") - margin.top - margin.bottom,

            //standard group + transform
            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            //scales x, y, color
            xScale = d3.scaleTime().rangeRound([0, chartWidth]);
            yScale = d3.scaleLinear().rangeRound([chartHeight, 0]);
            colorScale = d3.scaleOrdinal(d3.schemeCategory10);

            //get linevalues
            line = d3.line()
                    .x(function (d) { return xScale(d.DT); })
                    .y(function (d) { return yScale(d.val); });

        }

        //init chart once
        $(document).ready().one(initlineChart());
    </script>


</body>
</html>

jsfiddle

Answer 1

在你的代码中，你有这个：

var ts = g.selectAll("ts")
    .data(data)

但是，没有名为<ts>的元素。显然，您希望选择类：

var ts = g.selectAll(".ts")
    .data(data)

这是更新的小提琴：https://jsfiddle.net/qofsq5mc/

更新折线图上的数据不起作用

1 个答案: