gpt4 book ai didi

javascript - SVG 中的路径放置在 D3 图表中的圆圈前面,尽管附加顺序

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:43:32 25 4
gpt4 key购买 nike

我的数据线应该放在圆圈的后面,但顽固地拒绝这样做。首先我认为它与附加顺序有关,但显然不是。我了解到 others也有类似的问题。我希望这些点看起来像 this picture .

我注意到最后一个圆圈的行为确实符合预期。如果我首先附加一组圆圈,它会在线后面,而在相反的情况下它会在线。但是所有其他数据点都不遵循相同的逻辑。

通常,我会创建包含多个数据点的图表,所以这会是个问题...

我在 my chart 中缺少什么?

gees.append("path")
.attr("d", d3.svg.line().x(posX).y(posY)(data));
gees.append("circle")
.attr({ cx: posX, cy: posY, r: dotSize });

作为一个次要问题,因为我刚刚开始使用 D3,我很乐意接受对我的数据绑定(bind)方法以及构建元素创建和操作的方法的评论,如果观众认识到一些代码味道。

最佳答案

原因是当你这样做的时候:

// Set of g elements in for the individual data points
var gees = graph1.selectAll("g").data(data).enter().append("g");

// Path appended BEFORE the circles
gees.append("path")
.attr("d", d3.svg.line().x(posX).y(posY)(data))
.attr("class","dataPath");

您正在创建与数据一样多的路径。

示例:如果数据的长度为 10,您将绘制 10 条路径!。因此,每次都会在另一条路径上绘制一条新路径。然而,当您制作圆圈时,这是正确的,长度为 10 的数组也就是 10 个圆圈。

所以正确的做法是这样的:

//this will make a single path
graph1.append("path")
.attr("d", d3.svg.line().x(posX).y(posY)(data))
.attr("class","dataPath");

工作代码here

编辑

如果你看到你的 DOM

<g>
<path d="M10,395L30,346.23626273003947L50,348.88315845093945L70,325.8408757172729L90,361.79282401218563L110,337.23829975521113L130,271.36254043537434L150,326.84355151115744L170,296.18083274584734L190,239.00309425733596L210,246.4312641551351L229.99999999999997,261.73836974728044L250,222.77033711908345L270,175.77553751327844L290,202.07665355388494L310,162.47810406521793L330,161.2957419597571L350,131.1359499531521L370,129.23952903887664L390,139.51540231604645L410,144.10064067915437L430,126.07475247355066L449.99999999999994,114.16957928889813L470.00000000000006,47.3902223639799L490,67.03516083686108L510,10.340972431627879L530,5L550,27.22071082134911L570,52.42233413128351L590,17.020429086361613" class="dataPath"></path>
<circle cx="10" cy="395" r="5" class="dataPoint"></circle>
<line x1="10" y1="246.0618379173906" x2="10" y2="241.0618379173906" stroke="lightgrey" stroke-width="1"></line>
<line x1="0" y1="246.0618379173906" x2="600" y2="246.0618379173906" class="axis"></line>
</g>

然后下一个 DOM 是一个新的圆圈但旧的路径:

<g>
<path d="M10,395L30,346.23626273003947L50,348.88315845093945L70,325.8408757172729L90,361.79282401218563L110,337.23829975521113L130,271.36254043537434L150,326.84355151115744L170,296.18083274584734L190,239.00309425733596L210,246.4312641551351L229.99999999999997,261.73836974728044L250,222.77033711908345L270,175.77553751327844L290,202.07665355388494L310,162.47810406521793L330,161.2957419597571L350,131.1359499531521L370,129.23952903887664L390,139.51540231604645L410,144.10064067915437L430,126.07475247355066L449.99999999999994,114.16957928889813L470.00000000000006,47.3902223639799L490,67.03516083686108L510,10.340972431627879L530,5L550,27.22071082134911L570,52.42233413128351L590,17.020429086361613" class="dataPath"></path>
<circle cx="30" cy="346.23626273003947" r="5" class="dataPoint"></circle>
<line x1="30" y1="246.0618379173906" x2="30" y2="241.0618379173906" stroke="lightgrey" stroke-width="1"></line>
<line x1="0" y1="246.0618379173906" x2="600" y2="246.0618379173906" class="axis"></line>
</g>

因此您正在创建新的组,并且正在添加圆圈和路径 DOM。

我想如果你检查你的 DOM 你会更好地理解这个问题。

在我的 fiddle 中,线在圆圈后面,最后一个出现在前面,原因是线只到最后一个圆圈的中心。

再次编辑

使圆圈像this一样在线上方

//make the path first
graph1.append("path")
.attr("d", d3.svg.line().x(posX).y(posY)(data))
.attr("class","dataPath");

//make the group
// Set of g elements in for the individual data points
var gees = graph1.selectAll("g").data(data).enter().append("g");
//add the circle to the group
// Path appended BEFORE the circles
// Circles appended AFTER the path
gees.append("circle")
.attr({ cx: posX, cy: posY, r: dotSize })
.attr("class", "dataPoint");

工作代码 here

希望这对您有所帮助!

关于javascript - SVG 中的路径放置在 D3 图表中的圆圈前面,尽管附加顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35078205/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com