简体   繁体   English

使用D3js在线图上显示标签时出错

[英]Error on label displaying on line plot with D3js

I have a two line plot with dots drown from a tsv file with D3js. 我有一个两线图,其点被D3js从tsv文件淹没。 I would like to show the labels near to the dots. 我想将标签显示在圆点附近。 The tsv file is not complete and some values are missing, as follows: tsv文件不完整,缺少一些值,如下所示:

year    value1    value2
....
2000    8956355 
2001    8924704 
2002    8865723 
2003    8747717 
2004    8701521 
2004    8701521 
2005        11380809
2006        10672554
2007    8513818 10394369
2008    8462607 10297716
2009    8448535 9998783
2010    8411177 9988697
2011    8024205 9491908
2012    7920080 8725402
2013    7911208 8668111
2014    7807984 8274928
2015    7747598 8027083
2016    7575879 7779103

My code for displaying the first line, the dots and the labels is as follows (the same for second line): 我用于显示第一行,点和标签的代码如下(第二行相同):

// line1
fw1.append("path")
    .datum(data)
        .attr("class", "line")
        .attr("fill", "none")
        .attr("stroke", "#004494")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", line1);
// dots for line1
fw1.selectAll(".dot")
        .data(data)
            .enter()
            .append("circle")
                .attr("class", "dot")
                .style("stroke", "#004494")
                .attr("cx", function(d) { return x1(d.year); })
                .attr("cy", function(d) { return y1(d.value1); })
                .attr("r", 3.5)
fw1.append("g")
    .classed('labels-group', true)
    .selectAll('text')
    .data(data)
    .enter()
    .append('text')
        .classed('textlbl', true)
        .attr({ 'x': function(d) { return x1(d.year);},
                    'y': function(d) { return y1(d.value1);}
        })
    .text(function(d) { return d.value1 = (d.value1==="") ? null : +d.value1; });

The two lines and the dots are correctly displayed but the code returns the following error for the labels "Uncaught TypeError: Cannot read property 'text' of null". 正确显示了两行和点,但是代码为标签“未捕获的TypeError:无法读取属性'text'为null”返回了以下错误。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM