Question

我没有得到这行代码，我得到完美的轴两侧但线仍然缺失

在调用drawline函数时我得到了这个错误“错误：属性d：期望数字，”M0，NaNL116.66666666 ...“。”

我找不到任何解决方案。

<script src="http://d3js.org/d3.v4.min.js"></script>

    //Data from Webservice
    var jsonData = [{ "YEAR": "2017", "JAN": "0", "FEB": "21", "MAR": "65", "APR": "25", "MAY": "33", "JUN": "30", "JUL": "17", "AUG": "26", "SEP": "0", "OCT": "5", "NOV": "33", "DEC": "12" }, { "YEAR": "2018", "JAN": "10", "FEB": "0", "MAR": "0", "APR": "0", "MAY": "0", "JUN": "0", "JUL": "0", "AUG": "0", "SEP": "0", "OCT": "0", "NOV": "0", "DEC": "0" }]; `

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

        var tests = months.map(function (m) {`
    return {
        month: m,
        values: jsonData.map(function (d) {
            return {
                year: d.YEAR,
                quote: +d[m]
            };
        })
    };
                });


    x.domain(tests.map(function (d) { return d.month; }));
    y.domain([d3.min(tests, function (c) {
        return d3.min(c.values, function (v) {
            return v.quote;
        });
    }),
    d3.max(tests, function (c) { return d3.max(c.values, ` `function (v) { return v.quote; }); })]);


    // Create Line

    var drawLine = d3.line()
        .curve(d3.curveBasis)
        .x(function (d) {
            debugger;
            return x(d.month);
        })
        .y(function (d) {
            debugger;
            return y(d.values);
        });

    var draw = svg.selectAll(".month")
        .data(tests)
        .enter().append("g")
        .attr("class", "month")
        .datum(tests)
        .append("path")
        .attr("class", "line")
        .attr("d", drawLine)
        .style("stroke", function (d) {
            return color(d.year);
        })

`

Answer 1

您的代码中似乎缺少很多东西。

我在代码中做了一些更改，现在可以正常工作了。

//Data from Webservice
var jsonData = [{ "YEAR": "2017", "JAN": "0", "FEB": "21", "MAR": "65", "APR": "25", "MAY": "33", "JUN": "30", "JUL": "17", "AUG": "26", "SEP": "0", "OCT": "5", "NOV": "33", "DEC": "12" }, { "YEAR": "2018", "JAN": "10", "FEB": "0", "MAR": "0", "APR": "0", "MAY": "0", "JUN": "0", "JUL": "0", "AUG": "0", "SEP": "0", "OCT": "0", "NOV": "0", "DEC": "0" }];

var width = 400;
var height = 400;
var svg = d3.select('#lineChart');

var x = d3.scaleBand().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var months = [];
d3.keys(jsonData[0]).filter(function(key) {
  if (key !== "YEAR") {
    months.push(key)
  }
});
var years = [];
for (var i = 0; i < jsonData.length; i++) {
  years.push(jsonData[i]['YEAR']);
}
var tests = months.map(function(m) {
  return {
    month: m,
    values: jsonData.map(function(d) {
      return {
        year: d.YEAR,
        quote: parseInt(+d[m])
      };
    })
  };
});

x.domain(tests.map(function(d) {
  return d.month;
}));
var extent = [d3.min(tests, function(c) {
    return d3.min(c.values, function(v) {

      return v.quote;
    });
  }),
  d3.max(tests, function(c) {
    return d3.max(c.values, function(v) {
      return v.quote;
    });
  })
]

y.domain(extent);


// Create Line

var drawLine = d3.line()
  .curve(d3.curveBasis)
  .x(function(d) {
    return x(d.month);
  })
  .y(function(d) {
    return y((d.values[0]['quote']));
  });


var draw = svg.append('g').append("path")
  .datum(tests)
  .attr("class", "line")
  .attr("d", drawLine)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-linejoin", "round")
  .attr("stroke-linecap", "round")
  .attr("stroke-width", 1.5);

d3多线图问题

1 个答案: