1

私は楽しみのために使用している強制的な有向グラフ ID d3.js を持っています。現在、次のようになっています: http://jsfiddle.net/dzorz/WNSTf/

この 2 本の黒い線に小さな三角形を追加して、矢印のように見えるようにします。パスで三角形を追加しようとしましたが、行に追加する方法がわかりません..

脚本：

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。線自体に要素を追加するのではなく、1 対 1 の比率で図形を線に追加することに対応して、線を追加する選択範囲に要素を追加します。

各行の中央に円を追加するようにフィドルを変更しました。

黒い線だけに要素を追加したい場合は、フィルターを使用して新しいデータ セットを作成し、それを操作することができます。

于 2013-07-25T15:17:19.817 に答える