Изогнутая линия на дереве, направленном силой d3

Новичок в d3 и попытка разработать дерево направленной силы, в которое мы можем подключить набор данных varioss. Мне удалось реализовать основную идею, но я хотел бы сделать ссылки изогнутыми, чтобы иметь возможность работать с несколькими ссылками. Я просмотрел http://bl.ocks.org/1153292 и ничего не понял. Ближайшее, что я получаю, это то, что все работает без видимого пути. Это мой код для прямых линий, буду признателен за помощь, если у вас есть время

Спасибо:

//Sets up the svg that holds the data structure and puts it in the div called mapBox
var svg = d3.select("div#mapBox.theMap").append("svg")
.attr("width", mapWidth)
.attr("height", mapHeight);

//Sets up the data structure and binds the data to it       
var force = d3.layout.force()
.nodes(data.nodes)
.links(data.links)
.size([mapWidth, mapHeight])
.charge(-600)
.linkDistance(60)
.start();

//Draws the links and set up their styles
var link = svg.selectAll("link")
.data(data.links)
.enter().append("line")
.attr("class", "link")
.style("stroke", "#ccc")

//Creates nodes and attached "g" element to append other things to
var node = svg.selectAll(".node")
.data(data.nodes)
.enter().append("g")
.call(force.drag);

//Appends the cirdle to the "g" element and defines styles
node.append("circle")
.attr("r", function(d) { if (d.weight<1.1) {return 5} else {return d.weight*1.3+5 }})
.style("fill", "White") 
.style("stroke-width", 3)
.style("stroke", function(d) { if (d.type==1) {return "#eda45e "} if(d.type==2) {return "#819e9a"}else {return "#c36256" }} ) // Node stroke colors
.on("mouseover", nodeMouseover)
on("mouseout", nodeMouseout)
.on("mousedown", nodeMousedown)
.call(force.drag);

//Appends text to the "g" element and defines styles
node.append("text")
.attr("class", "nodetext")
.attr("dx", 16)
.attr("dy", ".35em")
.attr("text-anchor", function(d) { if (d.type==1) {return "middle";} else {return "start";} })
.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 + ")"; });

});


javascript svg d3.js force-layout
person Bob Haslett    schedule 19.11.2012    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Это также сработало для меня.

Сначала определите путь:

var path = vis.selectAll("path")
   .data(force.links());

path.enter().insert("svg:path")
   .attr("class", "link")
   .style("stroke", "#ccc");

Затем определите кривую, как говорит Боб Хаслетт и в примере с мобильными патентными исками:

path.attr("d", function(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});
person djjupa    schedule 04.05.2013

arrow_upward
27
arrow_downward

Дер, получилось.

сдача

.enter().append("line")

to

.enter().append("path")

затем изменить

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; });

to

link.attr("d", function(d) {
var dx = d.target.x - d.source.x,
    dy = d.target.y - d.source.y,
    dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});

Надеюсь, это поможет кому-нибудь застрять, как я

person Bob Haslett    schedule 19.11.2012
comment
Не забудьте добавить атрибут к стилю линии, убедившись, что его заливка отсутствует. - person Bob Haslett; 19.11.2012