Question

我使用D3.js使用示例here使用强制定向布局绘制饼图网络。现在我想以预先计算的坐标绘制馅饼网络，我不确定如何继续。我已经为绘图添加了两个节点属性（x，y），现在我需要在我的javascript中访问它们。

我还想在标签上添加鼠标到我的饼图，所以我添加了一个变量标签，但我不确定如何访问这些标签，但是如果我能得到xy坐标的帮助，我打赌我可以找出鼠标悬停位。

提前致谢！

这是html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

    <style>

        .node {
            stroke: #fff;
            stroke-width: 1.5px;
        }

        .link {
            stroke: #808080;
            stroke-opacity: .6;
        }

    </style>
</head>
<body>

<script type="text/javascript">
  graph = { "nodes":[{"proportions": [
{"group":1, "value": 25 },
{"group":2, "value": 0 },
{"group":3, "value": 0 },
{"group":4, "value": 0 }],"x":-315.838,"y":-500},{"proportions": [
{"group":1, "value": 0 },
{"group":2, "value": 25 },
{"group":3, "value": 0 },
{"group":4, "value": 0 }],"x":500,"y":-315.851},{"proportions": [
{"group":1, "value": 0 },
{"group":2, "value": 0 },
{"group":3, "value": 25 },
{"group":4, "value": 0 }],"x":315.838,"y":500},{"proportions": [
{"group":1, "value": 0 },
{"group":2, "value": 0 },
{"group":3, "value": 0 },
{"group":4, "value": 25 }],"x":-500,"y":315.851}],"links": [{ "source":0, "target":1, "length":900, "width":9},
{ "source":0, "target":3, "length":900, "width":9},
{ "source":1, "target":2, "length":900, "width":9},
{ "source":2, "target":3, "length":900, "width":9}]
} 
var labels = ['mycave1','mycave2','mycave3','mycave4'];
var width = 4000,
    height = 1000,
    radius = 100,
  color = d3.scale.category10();

   var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { return d.value; });

var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(0);

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

var force = d3.layout.force()
.charge(-120)
.linkDistance(4 * radius)
.size([width, height]);

force.nodes(graph.nodes)
.links(graph.links)
.start();

var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link");

var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node");

node.selectAll("path")
.data(function(d, i) {return pie(d.proportions); })
.enter()
.append("svg:path")
.attr("d", arc)
.attr("fill", function(d, i) { return color(d.data.group); });;

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("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"});
});
  </script>
  </body>
  </html>

Answer 1

如果将每个饼图定义为g元素并使用transform:translate属性，则可以重新定位整个饼图。您的代码看起来像这样：

var pies = svg.selectAll('.pie')
    .data(graph.nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .attr('transform', function(d){
        return 'translate(' + d.x + ',' + d.y + ')';
    });

以下是您的代码中的小提琴：fiddle

其中只有一个节点可见，因为其他节点的x / y属性为负，并且正在翻译页面。

当您在选择中有该节点时，与节点关联的所有数据都将可见，而当您选择所有切片时，只有单个切片的数据可见。另请注意，g元素没有x和y属性，只有transform属性。 Source: MDN

使用D3.js中的指定坐标绘制网络

1 个答案: