繁体   English   中英

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

Error on label displaying on line plot with D3js

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个两线图,其点被D3js从tsv文件淹没。 我想将标签显示在圆点附近。 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

我用于显示第一行,点和标签的代码如下(第二行相同):

// 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; });

正确显示了两行和点,但是代码为标签“未捕获的TypeError:无法读取属性'text'为null”返回了以下错误。

问题暂未有回复.您可以查看右边的相关问题.
1 d3js饼图的响应线标签

目前,我正在研究d3js饼图。 我希望饼图具有响应线标签。 任何人都可以指导我如何实现它。 这就是我尝试过的。 但是如果值较小,则标签会重叠,如下面的链接所示。 小提琴 ...

2 D3js Hive Plot:如何标记节点?

我是第一次尝试使用D3js Hive图,我正在努力了解如何在轴上的每个节点旁边放置标签。 请看我的小提琴,这里: http : //jsfiddle.net/NovasTaylor/jgkqoasm/#base 使用此代码,我可以将每个节点的标签放在适当的轴上。 标签(名称)不在其各自 ...

3 标签未针对散点图D3js中的所有值生成

我创建了一个散点图,该散点图从https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json提取Json数据,但一切正常,但标签未针对所有值生成 我的代码看起来像 ...

4 如何不使用D3js在多线图中显示缺失值

我正在尝试使用D3js从tsv文件中绘制两行。 一个系列是完整的,第二个系列的值仅从2005年开始。 我的两行代码如下: 如图所示,显示了两行,但是第二个系列不是从2005年开始,而是从该系列的开头开始,其片段来自x轴。 两线图 我不知道如何在2005年之前跳过所有 ...

5 D3js:如何使用JSON数据绘制多系列折线图

我想绘制具有以下json数据的多系列折线图,其中month是x轴数据,case count y轴和groupName是lines。 我在格式化行数据时遇到问题。 我想要一个多系列折线图,像这样。 http://projects.delimited.io/experiments/multi- ...

6 d3js放大图

我已经使用d3js进行了绘制,并且由于plot函数超出了绘制的范围,因此我想对其进行裁剪。 同时,我还考虑了缩放。 因此,我开始在代码中实现以下示例; http://bl.ocks.org/mbostock/3892919 但是不幸的是,我的实现似乎不正确。 我的x轴和y轴标签似乎 ...

7 d3js-我的折线图不起作用,并引发错误

我正在使用对象数组绘制图表。 但我没有任何输出。 以及我得到的错误是Uncaught TypeError: string.slice is not a function -但我不知道这个问题从何而来。 有人可以帮助我解决此问题吗? 这是我的代码和演示: 现场演示 ...

8 D3js折线图未转换,新栏上的工具提示错误

我在设置要转换数据的条形图和折线图时遇到麻烦。 有关代码,请参见JSFiddle 。 我是JSFiddle&D3js的一星期大孩子,所以对您的任何帮助都非常感谢! 问题是: 绿线未过渡 在“更新”之后添加到图表的任何新条形都不会显示工具提示。 检查显示Uncaugh ...

9 d3js折线图错误 - 绘制奇怪的区域

我找不到有类似问题的人,没有线索解决我在阅读文档和其他问题时遇到的问题,所以我希望有人可以帮助我。 这是我的代码(从文档示例中复制) 现在,你想知道我的变量'list_indicators_3years_absolute ['Gastos en activos financiero ...

10 D3js使文本标签可拖动

我正在按照此示例http://jsfiddle.net/enigmarm/3HL4a/13/制作条形图。 我想要制作图表时要做的是使data-labels可拖动。 我该如何实现? 我尝试调用拖拽行为,但没有任何结果。 我得到的只是NaN作为transform函数的输入。 ...

暂无
暂无

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

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