gpt4 book ai didi

javascript - d3.js 中的独立元素。是否需要数组?

转载 作者:行者123 更新时间:2023-12-02 13:44:30 25 4
gpt4 key购买 nike

我有一个关于 d3.js 的小问题。在此示例中,我可以单击一个节点,它会检​​查我之前创建的数组“a”是否获得了元素“element1”,如果是,它将节点之间的链接的描边宽度变为 22px 和其他的为 3px。

现在,这是我的问题。我现在只想操作这些新的分离的细笔画宽度为 3px 的笔画。我现在如何才能仅访问这些内容?我应该将它们存储在额外的数组中吗?

例如,我可以创建一个新按钮,如果我点击它,它只会将这些大小为 3px 的链接变成绿色,但不要碰其他链接。

on("click", function(d, i){
links.style("stroke-width", function(d){
return a.includes(d.element1) ? "22px" : "3px";
});........

最佳答案

我想我现在可能明白了。 @EricGuan 的解决方案遇到的问题是,当您使用样式笔画宽度时,他是按属性笔画宽度进行选择的。我认为你最好的选择是 .filter :

<!DOCTYPE html>
<html>

<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
<script>

var svg = d3.select('body')
.append('svg')
.attr('width','500px')
.attr('height', '500px');

var data = d3.range(10);

var links = svg.selectAll('.link')
.data(data)
.enter()
.append('path')
.attr('d', function(d){
return "M0," + (d * 50 + 3) + "L500," + (d * 50 + 3);
})
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", function(d){
return Math.random() > 0.5 ? '10px' : '3px';
});

links.filter(function(d){
return this.style.strokeWidth === '3px';
})
.transition()
.duration(2000)
.style('stroke-width', '23px');

</script>
</body>

</html>

关于javascript - d3.js 中的独立元素。是否需要数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41516344/

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