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

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

d3.js

d3.js到对角线之间的填充区域,d3.js,area,diagonal,D3.js,Area,Diagonal,我想模仿图像中充满粉红色的元素。我想那是两条对角线。但是我不知道如何填补他们之间的空白如果有任何帮助，我将不胜感激！这是我的代码： <!DOCTYPE html> <meta charset="utf-8"> <body> <script src="d3.min.js"></script> <style> .link { fill: none;

我想模仿图像中充满粉红色的元素。我想那是两条对角线。但是我不知道如何填补他们之间的空白

如果有任何帮助，我将不胜感激！这是我的代码：

<!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>


.链接{
填充：无；
冲程：#ccc；
笔划宽度：1.5px；
}
图表
var links=[{source:{x:0，y:0}，target:{x:200，y:200}，x:0，y:0}，
{源：{x:0，y:0}，目标：{x:170，y:200}，x:0，y:0}
]
var canvas=d3.选择（“.chart”）.追加（“svg”）
.attr（“宽度”，200）
.attr（“高度”，200）
.附加（“g”）；
var linkscocontainer=canvas.append（“g”）.attr（“class”，“linkscocontainer”）
var diagonal=d3.svg.diagonal（）
.source（函数（d）{return{“x”：d.source.x，“y”：d.source.y}；}）
.target（函数（d）{返回{“x”：d.target.x，“y”：d.target.y}；}）
.投影（函数（d）{返回[d.x，d.y]；}）；
var link=links容器。选择全部（“.link”）
.数据（链接）
.输入（）
.append（“路径”）
.attr（“类”、“链接”）
.attr（“d”，对角线）；
变量行=linksContainer.append（“行”）
.attr（“x1”，170）
.attr（“y1”，200）
.attr（“x2”，200）
.attr（“y2”，200）
.attr（“笔划宽度”，1）
.attr（“笔划”、“黑色”）；

d3.svg.diagonal（）

生成表示svg路径描述的字符串。在您的例子中，两个路径字符串是

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

及

您的代码当前将它们分配给

的

属性

相反，您只需要创建一个带有填充（因此闭合）路径字符串的

，该路径字符串是这两个字符串的组合

var shape = path1 + path2;// But not quite...

事实证明，你不能简单地把这两个字符串连在一起。您需要做的一件事是将拾取笔并将其移动到新点的

（从而中断形状的闭合性）替换为

，它将画一条线到新点：

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"

但是，子路径

…170200 L0,0…

错误地将

路径1的末尾连接到路径2的开头。要更正此问题，您需要通过在链接的起点和终点之间交换来反转路径2：
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}]

最后，这可能不会在视觉上产生差异，但为了正确起见，您应该使用Z
指令关闭路径：
var shape = path1 + path2 + 'Z';

// Apply `shape` to a single path element:
var path = linksContainer.append('path')
  .attr("class", "link")
  .attr("d", shape);

.
所示图片实际上是一个和弦图布局
你可以在这里学习如何使用它

对角线是用于树形图的不同形状Hi@meetamit恐怕你误解了这个问题。我附加了一些html/js代码，让您更好地了解我在寻找什么。我想填充对角线之间的区域。对不起，Andres，和弦图布局不适合我。因为你只需要一部分。chrod图是作为一个单独的东西给出的。@meetamit的答案正是我想要的。
var shape = path1 + path2 + 'Z';

// Apply `shape` to a single path element:
var path = linksContainer.append('path')
  .attr("class", "link")
  .attr("d", shape);