相关疑难解决方法(0)

D3强制定向布局与边界框

我是D3的新手,无法设置我的力导向布局的界限.我已经成功地(从示例中)拼凑了我想要的东西,但我需要包含图表.在tick函数中,transform/translate将正确显示我的图形,但是当我使用带有Math.max/min的cx和cy时(参见注释代码),节点固定在左上角,同时正确包含线条.

以下是我的内容......我做错了什么?

var w=960, h=500, r=8,  z = d3.scale.category20();

var color = d3.scale.category20();

var force = d3.layout.force()
       .linkDistance( function(d) { return (d.value*180) } )
       .linkStrength( function(d) { return (1/(1+d.value)) } )
       .charge(-1000)
       //.gravity(.08)
       .size([w, h]);

var vis = d3.select("#chart").append("svg:svg")
       .attr("width", w)
       .attr("height", h)
       .append("svg:g")
       .attr("transform", "translate(" + w / 4 + "," + h / 3 + ")");

vis.append("svg:rect")
   .attr("width", w)
   .attr("height", h)
   .style("stroke", "#000");


d3.json("miserables.json", function(json) {

       var link = vis.selectAll("line.link")
               .data(json.links);

       link.enter().append("svg:line")
               .attr("class", "link")
               .attr("x1", function(d) { return …
Run Code Online (Sandbox Code Playgroud)

d3.js force-layout

36
推荐指数
2
解决办法
3万
查看次数

标签 统计

d3.js ×1

force-layout ×1