个人中心
gpt4 book ai didi

javascript - 如何在 D3 force layout on load 中为 3 个节点指定 3 种不同的自定义颜色

转载 作者：行者123 更新时间：2023-11-28 12:17:18 25 4
gpt4 key购买 nike

我正在使用 D3 api 按顺序显示一些节点，这些节点以相同的颜色进入页面。当我将鼠标悬停在一个节点上时，它会变成其他颜色。但我想要在加载时为节点(不同于其他节点)使用固定颜色。我正在使用这个 api.. 请帮助我...

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .node circle {
stroke: white;
stroke-width: 1.5px;
opacity: 1.0;
   }

line {
stroke: black;
stroke-width: 1.5px;
stroke-opacity: 1.0;
 }
 </style>
 <body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
    data = {
        nodes : [ {
            size : 10
        }, {
            size : 5
        }, {
            size : 2
        }, {
            size : 3

        } ],
        links : [ {
            source : 0,
            target : 1
        }, {
            source : 0,
            target : 2

        } ]
    }

    var mouseOverFunction = function(d,i) {
        var circle = d3.select(this);
        //$ fill = d3.scale.category20();
        node.transition(500).style("opacity", function(o) {
            return isConnected(o, d) ? 1.0 : 0.2;
        }).style("fill", function(o) {
            if (isConnectedAsTarget(o, d) && isConnectedAsSource(o, d)) {
                fillcolor = 'green';
            } else if (isConnectedAsSource(o, d)) {
                fillcolor = 'red';
            } else if (isConnectedAsTarget(o, d)) {
                fillcolor = 'blue';
            } else if (isEqual(o, d)) {
                fillcolor = "hotpink";
            } else if(isNot(o,d)){

              //here the output will shown when no mouse event is occured


            }
            return fillcolor;
        });

        link
                .transition(500)
                .style("stroke-opacity", function(o) {
                    return o.source === d || o.target === d ? 1 : 0.2;
                })
                .transition(500)
                .attr(
                        "marker-end",
                        function(o) {
                            return o.source === d || o.target === d ? "url(#arrowhead)"
                                    : "url()";
                        });

        circle.transition(500).attr("r", function() {
            return 1.4 * node_radius(d)
        });
    }

    var mouseOutFunction = function() {
        var circle = d3.select(this);

        node.transition(500);

        link.transition(500);

        circle.transition(500).attr("r", node_radius);
    }

    function isConnected(a, b) {
        return isConnectedAsTarget(a, b) || isConnectedAsSource(a, b)
                || a.index == b.index;
    }

    function isConnectedAsSource(a, b) {
        return linkedByIndex[a.index + "," + b.index];
    }

    function isConnectedAsTarget(a, b) {
        return linkedByIndex[b.index + "," + a.index];
    }

    function isEqual(a, b) {
        return a.index == b.index;
    }

        //here i have trying to make root  node a separate color and the child nodes two separate colors
    function isNot(a,b){

    return d3.scale.category20()(i);
    }


    function tick() {
        link.attr("x1", function(d) {
            return d.source.x;
        }).attr("y1", function(d) {
            return d.source.y;
        }).attr("x2", function(d) {
            return d.target.x;
        }).attr("y2", function(d) {
            return d.target.y;
        });

        node.attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
    }

    function node_radius(d) {
        return Math.pow(40.0 * d.size, 1 / 3);
    }

    var width = 1000;
    var height = 500;

    var nodes = data.nodes
    var links = data.links

    var force = d3.layout.force().nodes(nodes).links(links).charge(-3000)
            .friction(0.6).gravity(0.6).size([ width, height ]).start();

    var linkedByIndex = {};
    links.forEach(function(d) {
        linkedByIndex[d.source.index + "," + d.target.index] = true;
    });

    var svg = d3.select("body").append("svg").attr("width", width).attr(
            "height", height);

    var link = svg.selectAll("line")
                .data(links)
                .enter()
                .append("line");

    var node = svg.selectAll(".node")
                .data(nodes)
                .enter()
        .append("g")
        .style("fill", function (d) {
                    return '#1f77b4';
                })  
        .attr("class", "node")
                .attr("cx",function(d) {
                    return d.x;
                })
            .attr("cy",function(d) {
                    return d.y;
                })  
        //.attr("fill",function(d){return color(d.range);})
        .call(force.drag);

    node.append("circle")
                .attr("r", node_radius)
                .on("mouseover", mouseOverFunction)
                .on("mouseout", mouseOutFunction);

    svg.append("marker")
                .attr("id", "arrowhead")
                .attr("refX", 6 + 7) // Controls the shift of the arrow head along the path
        .attr("refY", 2)
                .attr("markerWidth", 6)
                .attr("markerHeight", 4)
                .attr("orient", "auto")
                .append("path")
                .attr("d", "M 0,0 V 4 L6,2 Z");

    link.attr("marker-end", "url()");

    force.on("tick", tick);
</script>
 </body>

This is the output I got

But This is what I want..

最佳答案

我认为您的代码已经快完成了。在鼠标悬停时，您应该修改节点的“填充”css 属性。

为此，在 d3 中您必须使用:

node.append("circle")
    .attr("r", node_radius)
    .on("mouseover",mouseOverFunction)

就像你一样。在 moueOverFunction 中，您有两种选择来获取给定节点的属性:

1) 从节点的属性获取颜色:

function mouseoverFunction(node) {
    if(node.size<10) {
        return 'blue'
    } else {
        return 'red'
    }
}

2) 从节点在数据数组中的位置获取颜色:

function mouseoverFunction(node,index) {
    if(index<2) {
        // Will color the two first nodes blue
        return 'blue'
    } else {
        // All others will be red
        return 'red'
    }
}

最后我会针对你的具体问题做:

function mouseoverFunction(node,index) {
    if(index<3) {
        return ['red','green','blue'][index]
    } else {
        // index should be less than 3
        return 'black'
    }
}

关于javascript - 如何在 D3 force layout on load 中为 3 个节点指定 3 种不同的自定义颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20441421/

25 4 0
文章推荐： jquery - 如何在html网页中播放音频文件
文章推荐： css - 通过 less 和 MVC4 使用 Bootstrap
文章推荐： javascript - 解析 CSS 背景图像和选择器
文章推荐： swift - 设置 nspopover 的位置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com