Question

我想在图像中模仿粉红色的填充元素。我认为这是两个对角线。但我不知道如何填补它们之间的区域。

enter image description here

任何帮助，我都会太感激了！这是我的代码：

<!DOCTYPE html>
  <meta charset="utf-8">
  <body>
    <script src="d3.min.js"></script>
    <style>
      .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
        }
    </style>

  <div class="container">
    <h1 class="page-header">Chart</h1>
    <div class="chart"></div>
  </div>

  <script>
  var links = [{source: {x:0,y:0}, target: {x:200,y:200},x:0,y:0},
               {source: {x:0,y:0}, target: {x:170,y:200},x:0,y:0}
              ]

  var canvas = d3.select(".chart").append("svg")
        .attr("width", 200)
        .attr("height", 200)
        .append("g");


        var linksContainer = canvas.append("g").attr("class","linksContainer")
        var diagonal = d3.svg.diagonal()
                .source(function(d) { return {"x":d.source.x, "y":d.source.y}; })
                .target(function(d) { return {"x":d.target.x, "y":d.target.y};})
                .projection(function(d) { return [d.x, d.y]; });


        var link = linksContainer.selectAll(".link")
                .data(links)
                .enter()
                  .append("path")
                  .attr("class", "link")
                  .attr("d", diagonal);

                  var line = linksContainer.append("line")
                          .attr("x1", 170)
                          .attr("y1", 200)
                          .attr("x2", 200)
                          .attr("y2", 200)
                          .attr("stroke-width", 1)
                          .attr("stroke", "black");
  </script>
</body>

Answer 1

d3.svg.diagonal()生成表示SVG路径描述的String。在您的情况下，两个路径字符串是

var path1 = diagonal(links[0]);// "M0,0C0,100 200,100 200,200"

和

var path2 = diagonal(links[1]);// "M0,0C0,100 170,100 170,200"

您的代码目前会将每个代码分配到d的{{1}}属性。

相反，您需要只使用填充（因此已关闭）的路径字符串来生成单个<path class=".link" d="...">，该字符串是这两个字符串的组合。

<path>

事实证明，你不能简单地将这两个字符串连接起来。你需要做的一件事就是更换var shape = path1 + path2;// But not quite... - 它将拾取并将笔移动到一个新点（从而中断形状的闭合） - 使用M绘制一条线到那个新点：

这给你这个：

var path2 = diagonal(links[1]).replace(/^M/, 'L');// "L0,0C0,100 170,100 170,200"

但是，子路径var shape = path1 + path2;// "M0,0C0,100 170,100 170,200 L0,0C0,100 170,100 170,200"错误地将...170,200 L0,0...的结尾连接到path1的开头。要解决此问题，您需要通过在链接的起点和终点之间切换来反转path2：

path2

最后，这可能不会在视觉上产生差异，但为了正确，您应该使用var links = [ {source: {x:0,y:0}, target: {x:200,y:200},x:0,y:0}, // instead of {source: {x:0,y:0}, target: {x:170,y:200},x:0,y:0}] {source: {x:170,y:200}, target: {x:0,y:0},x:0,y:0}]指令关闭路径：

Here's a working fiddle

Answer 2

显示的图片实际上是和弦图布局。

您可以在此处学习如何使用它 https://github.com/mbostock/d3/wiki/Chord-Layout

对角线是用于树形图的不同形状

d3.js填充对角线之间的区域

2 个答案: