Question

我一直在构建d3条形图，但我坚持为什么我的折线图不会加载 - 抛出无法读取未定义的d3错误的属性'长度'所以我认为这是由于没有正确指向数据但不确定。我使用的数据是：

   var data = [   
        {month: "May", emailsDelivered: 20000, emailsOpened: 10000, emailsClicked: 7900},   
        {month: "Jun", emailsDelivered: 28000, emailsOpened: 11000, emailsClicked: 5900},   
        {month: "Jul", emailsDelivered: 30000, emailsOpened: 15000, emailsClicked: 2900},  
        {month: "Aug", emailsDelivered: 40000, emailsOpened: 8000, emailsClicked: 6900},   
        {month: "Sep", emailsDelivered: 30000, emailsOpened: 10000, emailsClicked: 7900},   
        {month: "Oct", emailsDelivered: 25000, emailsOpened: 10000, emailsClicked: 4900},  
        {month: "Nov", emailsDelivered: 30000, emailsOpened: 9000, emailsClicked: 5900},   
        {month: "Dec", emailsDelivered: 36000, emailsOpened: 2000, emailsClicked: 2900},   
        {month: "Jan", emailsDelivered: 41000, emailsOpened: 5000, emailsClicked: 1900},  
        {month: "Feb", emailsDelivered: 46000, emailsOpened: 7000, emailsClicked: 8900},   
        {month: "Mar", emailsDelivered: 38000, emailsOpened: 16000, emailsClicked: 4900},   
        {month: "Apr", emailsDelivered: 24000, emailsOpened: 10000, emailsClicked: 7900} 
    ]

这是我的其余代码。这是我第一次在stackoverflow上发帖，所以如果我的格式不好，我会道歉。

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var xScale = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.2);

var yScale = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")


var svg = d3.select("#emails_graph").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

xScale.domain(data.map(function(d) { return d.month; }));
yScale.domain([0, d3.max(data, function(d) { return d.emailsDelivered; })]);


var line = d3.svg.line()
        .x(function(d, i) { return (xScale(i) + xScale.rangeBand() / 2); })
        .y(function(d){ return yScale(d); });

var lines = svg.selectAll("path.line")
        .data(data)
        .enter()
        .append("path")
            .attr("d", line(data.emailsDelivered))
            .attr("class", "line")
            .attr("fill", "none")
            .attr("stroke", "#888");

Answer 1

有几个问题正在发生。

首先，这是你的代码的工作方式。 https://jsfiddle.net/28w8kk3u/

您的意图是变量data包含单行的点，但是当您调用.data(data)时，d3会看到一个包含12个单独对象的数组。您需要致电.data([data])。这样，d3就会看到一个包含单个“对象”的数组，其中在该单个对象中有12个数据点。
需要告诉d3.svg.line()创建的行生成器如何从传入的对象中检索您想要的x和y值。你试图通过

.x(function(d, i) { return (xScale(i) + xScale.rangeBand() / 2); })

作为你的x-accessor功能。这对d3没有意义，因为你创建了一个ordinal比例，它将字符串映射到数字（例如，将'Jan'放入xScale并返回40）。 xScale期望您的月份名称，因此

.x(function(d) { return (xScale(d.month)); })

线路生成器：

var line = d3.svg.line()
    .x(function(d) { return (xScale(d.month)); })
    .y(function(d){ return yScale(d.emailsDelivered); });

然后，要调用行生成器，您需要传入整个对象。

.attr("d", line)

以上是

.attr("d",function(d){
    return line(d)
})

D3折线图 - 无法显示行

1 个答案: