1

我有强制有向图 id d3.js，我只是为了好玩。目前它看起来像这样：http: //jsfiddle.net/dzorz/WNSTf/

我想在这两条黑线上添加小三角形，使它们看起来像箭头。我试图用路径添加三角形，但我不知道如何将它附加到线条上。

脚本：

var data = {"nodes":[
        {"name":"Action 4", "type":5, "slug": "", "value":265000},
        {"name":"Action 5", "type":6, "slug": "", "value":23000},
        {"name":"Action 3", "type":4, "slug": "", "value":115000},
        {"name":"Iron Man", "type":1, "slug": "Iron_Man",
            "img_href": "http://www.1sticondesign.com/core/free/Ironman-128.png"},
        {"name":"Superman", "type":1, "slug": "Superman",
            "img_href":"http://www.desktop-icon.com/stock-icons/desktop-boss/superman-icon.gif"},
        {"name":"Action 1", "type":2, "slug": "",},
        {"name":"Action 2", "type":3, "slug": "",},
        {"name":"Batman", "type":1, "slug": "Batman", "img_href": "http://icons.iconarchive.com/icons/iconshock/batman/256/Batman-icon.png"}
                    ], 
            "links":[
        {"source":0,"target":3,"value":10},
        {"source":4,"target":3,"value":1},
        {"source":1,"target":7,"value":10},
        {"source":2,"target":4,"value":10},
        {"source":4,"target":7,"value":1},
        {"source":4,"target":5,"value":10},
        {"source":4,"target":6,"value":10}
                    ]
   }     

var w = 560,
    h = 500,
radius = d3.scale.log()
    .domain([0, 312000])
    .range(["10", "50"]);

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

//d3.json(data, function(json) {
    var force = self.force = d3.layout.force()
        .nodes(data.nodes)
        .links(data.links)
        .distance(100)
        .charge(-1000)
        .size([w, h])
        .start();

    var link = vis.selectAll("line.link")
        .data(data.links)
        .enter().append("svg:line")
        .attr("class", function (d) { return "link" + d.value +""; })
        .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; });


    function openLink() {
    return function(d) {
        var url = "";
        if(d.type == 1) {
            url = "wiki/" + d.slug
        } //else if(d.type == 2) {
            //url = "clients/" + d.slug
        //} else if(d.type == 3) {
            //url = "agencies/" + d.slug
        //}
        window.open("https://en.wikipedia.org/"+url)
    }
}


    var node = vis.selectAll("g.node")
        .data(data.nodes)
      .enter().append("svg:g")
        .attr("class", "node")
        .call(force.drag);

    node.append("circle")
      .attr("class", function(d){ return "node type"+d.type})
        .attr("r", function(d) { return radius(d.value) || 10 })
      //.style("fill", function(d) { return fill(d.type); })
      .call(force.drag);

    node.append("svg:image")
        .attr("class", "circle")
        .attr("xlink:href", function(d){ return d.img_href})
        .attr("x", "-16px")
        .attr("y", "-16px")
        .attr("width", "32px")
        .attr("height", "32px")
        .on("click", openLink());

    node.append("svg:text")
        .attr("class", "nodetext")
        .attr("dx", 16)
        .attr("dy", ".35em")
        .text(function(d) { return d.name });

    force.on("tick", function() {
      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 + ")"; });
    });
//});

CSS：

.link10 { stroke: #ccc; stroke-width: 3px; stroke-dasharray: 3, 3; }
.link1 { stroke: #000; stroke-width: 3px;}
.nodetext { pointer-events: none; font: 10px sans-serif; }

.node.type1 {
  fill:brown;
}
.node.type2 {
  fill:#337147;
}
.node.type3 {
  fill:blue;
}
.node.type4 {
  fill:red;
}

.node.type5 {
    fill:#1BC9E0;
}

.node.type6 {
    fill:#E01B98;
}

image.circle {
    cursor:pointer;
}

你能在我的jsfiddle中给我看吗？

4

1 回答 1

3

如果您拆分数据输入块并为

var links = svg.selectAll('line.link')
    .data(data.link)
    .enter()

您可以将多个不同的东西附加到您定义为的选择中links。您本身并没有向线条添加更多元素，而是将元素添加到要添加线条的选择中，对应于以一对一的比例向线条添加形状。

I've modified your fiddle to add a circle to the middle of each line.

If you want to only add elements to the black lines, you can use a filter to do so by creating a new data set and operating on that.

于 2013-07-25T15:17:19.817 回答