d3.js - 无法在 d3.v4.min.js 中添加多个数据集

问题描述

尝试在图表中添加多个数据集，我使用下面的代码，因为即使在我的数据中出现空值后我也不希望换行，请帮助我，我是图表开发的新手。

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    var w = 500,
    h = 300;
    var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

    var data = [
    [10, 50],
    [20, 70],
    [30, 20],
    [40, 60],
    [50, 40],
    [60, null],
    [70, null],
    [80, null],
    [90, 90],
    [100, 20]
    ];

        var xScale = d3.scaleLinear().domain([0, 100]).range([30, w - 20]);
        var yScale = d3.scaleLinear().domain([0, 100]).range([h - 20, 20]);

        var counter;

        var line = d3.line().x(function (d) {
                return xScale(d[0]);
            })

        .y(function (d) {
                return yScale(d[1]);
        })

        .defined(function (d) {
            return d[1] || d[1] === '0';
        });

        var filteredData = data.filter(line.defined());

        svg.append("path")
          .attr("d", line(filteredData))
          .attr("stroke-width", 2)
          .attr("stroke", "teal")
          .attr("fill", "none");

        var xAxis = d3.axisBottom(xScale);
        var yAxis = d3.axisLeft(yScale);

        svg.append("g")
          .attr("transform", "translate(0," + (h - 20) + ")")
          .call(xAxis);

        svg.append("g")
          .attr("transform", "translate(30,0)")
          .call(yAxis);

    </script>
    </body>
    </html>

标签： d3.js

d3.js - 无法在 d3.v4.min.js 中添加多个数据集

问题描述

解决方案

推荐阅读