javascript - 编辑 "radial"图表中 D3 SVG 的链接位置-6ren

javascript - 编辑 "radial"图表中 D3 SVG 的链接位置

转载作者：行者123 更新时间：2023-11-29 16:34:41

我遇到了一个没有成功解决的问题，在这种情况下，我想从矩形的中间开始移动链接，将它们放在最末端，以便 PUB-2 和 PUB-3不要互相交叉。如果可能的话，展开第一层并默认关闭另一层。

有什么想法吗？这是源代码https://bl.ocks.org/mbostock/4339083 (d3 网站)和工作代码笔( https://codepen.io/andrea06590/pen/mzJmpE )，其中我使用以下代码+第 126 行的链接间距将原始圆形更改为矩形:

  nodeEnter.append("rect")
      .attr("width", 75)
      .attr("height", 20)
      .attr("x", -10)
      .attr("y", -10)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "red"; });

最佳答案

修复链接的方法如下:

首先，更改矩形位置，使它们位于标准链接节点图中圆圈所在位置的中心。我没有在 update 函数中硬编码值，而是在对象中配置了矩形尺寸:

var rect = {l: 60, w: 20};

编辑矩形属性以使用 rect 中的值，并通过将 x 和 y 值偏移来使矩形在节点上居中分别是矩形长度和宽度的一半。

nodeEnter.append("rect")
  .attr("width", rect.l)  // long dimension
  .attr("height", rect.w) // short dimension
  .attr("x", -rect.l/2)   // offset by half the long dimension
  .attr("y", -rect.w/2)   // offset by half the short dimension
  .style("fill", function(d) {
    return d._children ? "lightsteelblue" : "red";
  });

要修复链接，我们需要将其开始和结束位置更改相同的偏移量。由于退出和进入链接都使用源节点的位置，因此我们唯一需要担心的链接是更新选择:

link.transition()
  .duration(duration)
  .attr("d", diagonal);

diagonal 采用以下形式的对象

{ source: { x: 123, y: 456 }, target: { x: 234, y: 567 } }

在更新选择的情况下，数据项已在此配置中，因此调用 diagonal(d) 可以正常工作。由于我们要更改坐标以包含矩形的偏移量，因此我们必须中断对 Angular 线调用。请注意，投影会切换 x 和 y 坐标，因此我们必须更改 y 值:

  link.transition()
    .duration(duration)
    .attr("d", function(d){
      return diagonal({
      source: {x: d.source.x, y: d.source.y + rect.l/2}, // add half the rectangle length
      target: {x: d.target.x, y: d.target.y - rect.l/2}  // minus half the rectangle length
    })
  });

我还通过删除您添加的偏移并将文本 anchor 设置为“中间”，将文本在矩形中居中。

结果如下:

var pubs =
{
    "name": "AUT-1",
    "children": [
        {
            "name": "PUB-1","children": [
                {"name": "AUT-11","children": [
                    {"name": "AFF-111"},
                    {"name": "AFF-112"}
                ]},
                {"name": "AUT-12","children": [
                    {"name": "AFF-121"}
                ]},
                {"name": "AUT-13","children": [
                    {"name": "AFF-131"},
                    {"name": "AFF-132"}
                ]},
                {"name": "AUT-14","children": [
                    {"name": "AFF-141"}
                ]}
            ]
        },
        {
            "name": "PUB-2","children": [
                {"name": "AUT-21"},
                {"name": "AUT-22"},
                {"name": "AUT-23"},
                {"name": "AUT-24"},
                {"name": "AUT-25"},
                {"name": "AUT-26"},
                {"name": "AUT-27"},
                {"name": "AUT-28","children":[
                    {"name": "AFF-281"},
                    {"name": "AFF-282"},
                    {"name": "AFF-283"},
                    {"name": "AFF-284"},
                    {"name": "AFF-285"},
                    {"name": "AFF-286"}
                ]}
            ]
        },
        {"name": "PUB-3"},
        {
            "name": "PUB-4","children": [
                {"name": "AUT-41"},
                {"name": "AUT-42"},
                {"name": "AUT-43","children": [
                    {"name": "AFF-431"},
                    {"name": "AFF-432"},
                    {"name": "AFF-433"},
                    {"name": "AFF-434","children":[
                        {"name": "ADD-4341"},
                        {"name": "ADD-4342"},
                    ]}
                ]},
                {"name": "AUT-44"}
            ]
        },
        {
            "name": "PUB-5","children": [
                {"name": "AUT-51","children":[
                    {"name": "AFF-511"},
                    {"name": "AFF-512"},
                    {"name": "AFF-513"},
                    {"name": "AFF-514"},
                    {"name": "AFF-515"},
                    {"name": "AFF-516"}
                ]},
                {"name": "AUT-52"},
                {"name": "AUT-53"},
                {"name": "AUT-54"},
                {"name": "AUT-55","children":[
                    {"name": "AFF-551"},
                    {"name": "AFF-552"},
                    {"name": "AFF-553"},
                    {"name": "AFF-554"}
                ]},
                {"name": "AUT-56"},
                {"name": "AUT-57"},
                {"name": "AUT-58"},
                {"name": "AUT-59"},
                {"name": "AUT-591"},
                {"name": "AUT-592"},
                {"name": "AUT-593"},
                {"name": "AUT-594"},
                {"name": "AUT-595"},
                {"name": "AUT-596"}
            ]
        },
        {
            "name": "PUB-6","children": [
              {"name": "AUT-61","children":[
                  {"name": "AFF-611"},
                  {"name": "AFF-612"},
                  {"name": "AFF-613"},
                  {"name": "AFF-614","children":[
                      {"name": "ADD-6141"},
                      {"name": "ADD-6142"},
                  ]}
              ]},
              {"name": "AUT-62"},
              {"name": "AUT-63"},
              {"name": "AUT-64"},
              {"name": "AUT-65"},
              {"name": "AUT-66"},
              {"name": "AUT-67"},
              {"name": "AUT-68"},
              {"name": "AUT-69"}
            ]
        }
    ]
};

var diameter = 800;

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = diameter,
    height = diameter;
    
var i = 0,
    duration = 350,
    root;

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 80])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 1) / a.depth; });

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
          
var svg = d3.select("body").append("svg")
    .attr("width", width )
    .attr("height", height )
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

var rect = {l: 60, w: 20}

root = pubs;
root.x0 = height / 2;
root.y0 = 0;

update(root);

d3.select(self.frameElement).style("height", "800px");

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root),
      links = tree.links(nodes),
      offset = nodes[0].x

  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .on("click", click);

  nodeEnter.append("rect")
      .attr("width", rect.l)
      .attr("height", rect.w)
      .attr("x", -rect.l/2)
      .attr("y", -rect.w/2)
      .style("fill", function(d) {
        return d._children ? "lightsteelblue" : "red";
      });

  nodeEnter.append("text")
      .attr("x", 0)
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      //.attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length * 8.5)  + ")"; })
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

  // nodeUpdate.select("circle")
  //     .attr("r", 4.5)
  //     .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

  nodeUpdate.select("text")
      .style("fill-opacity", 1)
      .attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)"; });

  // TODO: appropriate transform
  var nodeExit = node.exit().transition()
      .duration(duration)
      //.attr("transform", function(d) { return "diagonal(" + source.y + "," + source.x + ")"; })
      .remove();

  // nodeExit.select("circle")
  //     .attr("r", 1e-6);

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", function(d){
      return diagonal({
      source: {x: d.source.x, y: d.source.y+rect.l/2}, 
      target: {x: d.target.x, y: d.target.y-rect.l/2}
      })
  });

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  
  update(d);
}

// Collapse nodes
function collapse(d) {
  if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
}

.node {
  cursor: pointer;
}

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

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>

我认为直线在这个可视化中看起来更好 - 例如:

var pubs =
{
    "name": "AUT-1",
    "children": [
        {
            "name": "PUB-1","children": [
                {"name": "AUT-11","children": [
                    {"name": "AFF-111"},
                    {"name": "AFF-112"}
                ]},
                {"name": "AUT-12","children": [
                    {"name": "AFF-121"}
                ]},
                {"name": "AUT-13","children": [
                    {"name": "AFF-131"},
                    {"name": "AFF-132"}
                ]},
                {"name": "AUT-14","children": [
                    {"name": "AFF-141"}
                ]}
            ]
        },
        {
            "name": "PUB-2","children": [
                {"name": "AUT-21"},
                {"name": "AUT-22"},
                {"name": "AUT-23"},
                {"name": "AUT-24"},
                {"name": "AUT-25"},
                {"name": "AUT-26"},
                {"name": "AUT-27"},
                {"name": "AUT-28","children":[
                    {"name": "AFF-281"},
                    {"name": "AFF-282"},
                    {"name": "AFF-283"},
                    {"name": "AFF-284"},
                    {"name": "AFF-285"},
                    {"name": "AFF-286"}
                ]}
            ]
        },
        {"name": "PUB-3"},
        {
            "name": "PUB-4","children": [
                {"name": "AUT-41"},
                {"name": "AUT-42"},
                {"name": "AUT-43","children": [
                    {"name": "AFF-431"},
                    {"name": "AFF-432"},
                    {"name": "AFF-433"},
                    {"name": "AFF-434","children":[
                        {"name": "ADD-4341"},
                        {"name": "ADD-4342"},
                    ]}
                ]},
                {"name": "AUT-44"}
            ]
        },
        {
            "name": "PUB-5","children": [
                {"name": "AUT-51","children":[
                    {"name": "AFF-511"},
                    {"name": "AFF-512"},
                    {"name": "AFF-513"},
                    {"name": "AFF-514"},
                    {"name": "AFF-515"},
                    {"name": "AFF-516"}
                ]},
                {"name": "AUT-52"},
                {"name": "AUT-53"},
                {"name": "AUT-54"},
                {"name": "AUT-55","children":[
                    {"name": "AFF-551"},
                    {"name": "AFF-552"},
                    {"name": "AFF-553"},
                    {"name": "AFF-554"}
                ]},
                {"name": "AUT-56"},
                {"name": "AUT-57"},
                {"name": "AUT-58"},
                {"name": "AUT-59"},
                {"name": "AUT-591"},
                {"name": "AUT-592"},
                {"name": "AUT-593"},
                {"name": "AUT-594"},
                {"name": "AUT-595"},
                {"name": "AUT-596"}
            ]
        },
        {
            "name": "PUB-6","children": [
              {"name": "AUT-61","children":[
                  {"name": "AFF-611"},
                  {"name": "AFF-612"},
                  {"name": "AFF-613"},
                  {"name": "AFF-614","children":[
                      {"name": "ADD-6141"},
                      {"name": "ADD-6142"},
                  ]}
              ]},
              {"name": "AUT-62"},
              {"name": "AUT-63"},
              {"name": "AUT-64"},
              {"name": "AUT-65"},
              {"name": "AUT-66"},
              {"name": "AUT-67"},
              {"name": "AUT-68"},
              {"name": "AUT-69"}
            ]
        }
    ]
};

var diameter = 800;

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    width = diameter,
    height = diameter;
    
var i = 0,
    duration = 350,
    root;

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 80])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 1) / a.depth; });


var diagonal_extras = {
  path: {
      // diagonal line
      direct: function(p){
        return [ p.source, p.target ];
      }

      // this is also the default path in radial trees
      , l_shape: function(p){
        return [ p.source, { x: p.target.x, y: p.source.y }, p.target ];
      }

      , l_shape_2: function(p){
        return [ p.source, { x: p.source.x, y: p.target.y }, p.target ];
      }

      , dogleg: function(p){
        return [ p.source,
        {   x: p.source.x,
            y: (p.source.y + p.target.y) / 2
        },
        {   x: (p.source.x + p.target.x) / 2,
            y: (p.source.y + p.target.y) / 2
        },
        {   x: p.target.x,
            y: (p.source.y + p.target.y) / 2
        }, p.target];
      }

      , dogleg_2: function(p){
        return [ p.source,
        {   x: (p.source.x + p.target.x) / 2,
            y: p.source.y
        },
        {   x: (p.source.x + p.target.x) / 2,
            y: (p.source.y + p.target.y) / 2
        },
        {   x: (p.source.x + p.target.x) / 2,
            y: p.target.y
        }, p.target];
      }

    }

    , polar_obj_to_cart: function(pt){
        var angle = pt.x / 180 * Math.PI;
        return [pt.y * Math.cos(angle), pt.y * Math.sin(angle)];
    }

    , polar_coords_to_cart: function(xy){
        var angle = xy[0] / 180 * Math.PI;
        return [ xy[1] * Math.cos(angle), xy[1] * Math.sin(angle)];
    }

}

diagonal_extras.right_angle = function() {

      var projection = d3.svg.diagonal().projection()
      , path_type = 'dogleg'
      ;

      function diagonal(d) {
        return diagonal.path_maker( diagonal_extras.path[ diagonal.path_type() ](d) );
      }

      diagonal.path_maker = function( pathData ) {
        return "M" + pathData.map( projection ).join(' ');
      };

      diagonal.valid_path_types = function() {
        return Object.keys( diagonal_extras.path );
      };

      diagonal.path_type = function(x) {
        if (! arguments.length) { return path_type; }
        if ( diagonal_extras.path[ x ] ) {
          path_type = x;
          return diagonal;
        }
        throw new Error( x + ' is not a valid path type' );
      };

      diagonal.projection = function(x) {
        if (!arguments.length) { return projection; }
        projection = x;
        return diagonal;
      };

      diagonal.path = function(x) {
        if (!arguments.length) { return path; }
        path = x;
        return diagonal;
      };

      diagonal.draw = function(d) {
        return diagonal(d);
      };

      return diagonal;
}
diagonal_extras.radial = function() {
      var diagonal = diagonal_extras.right_angle()
      , projection = function(pt){
        return [ pt.x, pt.y ];
      };

      diagonal.path_type('direct');

      diagonal.projection = function(x) {
        if (!arguments.length) { return projection; }
        projection = x;
        return diagonal;
      };

      diagonal.path_maker = function( pathData ) {

        var projected = pathData.map( function(x){ return projection(x); })
        , pl = projected.length
        , points
        , prev_angle
        ;

        // direct link:
        if ( 2 === pl ) {
          return 'M' + projected.map( function(x){ return diagonal_extras.polar_coords_to_cart(x); }).join(' ');
        }

        points = projected.map( function(obj){
          return { angle: obj[0] / 180 * Math.PI, radius: obj[1] };
        });

        return "M" + points.map( function(pt){
          var str = '';
          if ( prev_angle ) {
            if ( prev_angle === pt.angle ) {
              // draw a straight line
              str = 'L';
            }
            else {
              // draw an arc to the new radius and angle
              str = 'A' + pt.radius + ',' + pt.radius
              // x axis rotation
              + " 0 "
              // large arc flag
              + " 0,"
              // sweep
              + ( pt.angle > prev_angle ? 1 : 0) + " ";

            }
          }
          prev_angle = pt.angle;
          return str + pt.radius * Math.cos(pt.angle) + "," + pt.radius * Math.sin(pt.angle);

        }).join(' ');

      };
      return diagonal;
}

var diagonal = diagonal_extras.radial()
  .path_type('dogleg')
  .projection(function(d){ return [ d.x - 90, d.y ]; });

var svg = d3.select("body").append("svg")
    .attr("width", width )
    .attr("height", height )
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")rotate(90)"); // note the altered rotation

var rect = {l: 60, w: 20}

root = pubs;
root.x0 = height / 2;
root.y0 = 0;

//root.children.forEach(collapse); // start with all children collapsed
update(root);

d3.select(self.frameElement).style("height", "800px");

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root),
      links = tree.links(nodes),
      offset = nodes[0].x

  // Normalise angles so that the root is horizontal
  nodes.forEach(function(d) {
    d.x -= offset;
    if (d.x < 180) { d.x += 360 }
  });
  
  // Update the nodes…
  var node = svg.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .on("click", click);

  nodeEnter.append("rect")
      .attr("width", rect.l)
      .attr("height", rect.w)
      .attr("x", -rect.l/2)
      .attr("y", -rect.w/2)
      .style("fill", function(d) {
        return d._children ? "lightsteelblue" : "red";
      });

  nodeEnter.append("text")
      .attr("x", 0)
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.name; })
      .style("fill-opacity", 1e-6);

  // Transition nodes to their new position.
  var nodeUpdate = node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

  nodeUpdate.select("text")
      .style("fill-opacity", 1)
      .attr("transform", function(d) {
        return ( d.x < 270 || d.x > 450 )
        ? 'rotate(180)'
        : ''
       });

  // TODO: appropriate transform
  var nodeExit = node.exit().transition()
      .duration(duration)
      //.attr("transform", function(d) { return "diagonal(" + source.y + "," + source.x + ")"; })
      .remove();

  nodeExit.select("text")
      .style("fill-opacity", 1e-6);

  // Update the links…
  var link = svg.selectAll("path.link")
      .data(links, function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      });

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", function(d){
      return diagonal({
      source: {x: d.source.x, y: d.source.y+rect.l/2}, 
      target: {x: d.target.x, y: d.target.y-rect.l/2}
      })
  });

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  
  update(d);
}

// Collapse nodes
function collapse(d) {
  if (d.children) {
      d._children = d.children;
      d._children.forEach(collapse);
      d.children = null;
    }
}

.node {
  cursor: pointer;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>

关于javascript - 编辑 "radial"图表中 D3 SVG 的链接位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52556894/

文章推荐： mysql - 如何通过多重联接展平或正确分组

文章推荐： Javascript 检查数组中至少 2 个字符串非空

svg - 用于将页内 SVG 代码下载为 SVG 文件的按钮？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
svg - 如何将一个 SVG 元素的内容复制到另一个 SVG 元素并保持同步
有两个 SVG 元素( SVG1 和 SVG2 )，其中 SVG1 是一个包含各种元素的大区域，会不时添加、删除和重新定位。另一方面，SVG2 需要用作图标化表示(小) SVG1 的版本，非常小，但
svg - 如何在 svg 文档中以编程方式创建 svg 元素？
我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。但是，这种方法似乎不适用
svg - 我正在尝试使用 flutter svg，但加载黑色 svg
我正在尝试使用 Flutter SVG 依赖项，我将 svg 放入 Assets 中，在 pubspec.yaml 中设置，并在我的小部件中设置，但是，使用黑色容器加载 svg 我已经尝试过更改 sv
svg - 为什么将
为什么这样的演示:http://jsbin.com/ejorus/2/edit，将元素嵌套在另一个元素内？ JS
svg - 如何将 svg 代码保存为 .svg 图像？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
svg - 在另一个 SVG 元素中响应地居中 SVG 元素？
我正在尝试在 SVG 中做一些非常简单的事情: 将整个视口(viewport)分成两个矩形每个矩形的宽度应为视口(viewport)宽度的 50% 每个矩形的高度应为视口(viewport)高度的
svg - 我如何将一个 SVG 置于另一个 SVG 中
我试图将 play svg 居中放置在 SVG 圆圈的中间，但似乎不知道该怎么做。垂直和水平。 https://jsfiddle.net/c0qshm0t/17/ 最
svg - 用另一个 SVG 形状填充 SVG 形状
是否可以使用一个 SVG 形状作为另一个形状的填充？最佳答案您想使用 SVG Pattern .见 this example : 注意
svg - SVG 中跨路径的渐变
我在 SVG 中有一个非常简单的路径。 (预览:https://i.imgur.com/nVnxcRg.png) 我想要
svg - 如何将形状优美的多边形转换为 SVG？
我可以通过以下方式创建多边形: #!/usr/bin/env python from shapely.geometry import Polygon area = Polygon(((52, 13),
svg - Webpack:无法使用文件加载器显示 SVG 图像(svg 解析错误)
我使用 require 的 SVG 没有显示。在我的终端中，svg Assets 被发出并且路径在我的 html 中正确设置。但是，SVG 不会显示，而其他格式(如 jpg 或 png)可以显示
svg - SVG 中的混合模式
我在 SVG 混合模式中遇到了问题。我在 SVG 中有四个路径，我想用公式组合它们:(1*2) + (3*4)，即路径 1 和路径 2 应该使用乘法模式混合，类似地路径 3 和路径 4 应该使用混合相
svg - SVG 支持多少级递归？
我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。) 作为测试，我尝试了 this earlier reply 中提供的代码的变体。 .这个由 3 个单独的文件组成，
svg - svg 中的剪辑路径和变换组合
请引用以下组中的clip-path 组 ID -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。问题是什么？为什么
svg - svg 形状中的文本区域
使用联合 js 在 svg 中创建了一个文本区域。但是，我无法在文本区域中输入任何文本。如何使文本区域可编辑？代码: var graph = new joint.dia.Graph;
svg - svg 动画可以在不丢失累积信息的情况下暂停吗？
您可以不受限制地停止和重复动画，但如果您重新启动一个不确定的动画，它将失去其累积值并从初始值开始。也许我应该用一个例子来澄清；拿这个动画: 如果我停止此动画，并开始影响同一对象旋转的不同动画(
svg - SVG、多条小路径和一条大路径哪个更有效？
如果我在浏览器中显示常规 SVG(作为独立文件或嵌入在 HTML 中)，在拥有大量单独的路径元素和一个巨大的路径元素之间在效率上是否有任何理论上的差异？我正在考虑将某种动画从一张图片变成一张完全不同
svg - SVG 中的海龟图形？
logo的turtlegraphics的svg路径中是否有等价物？而不是硬编码的 x 和 y 坐标，这也迫使我在移动更相对的“增量”方法时调整控制点。我的解决方案应该适用于 FOCS(Firefo
svg - SVG 图案中使用的圆帽线
目前正在使用 SVG 元素与一堆元素将使它具有一种逐渐变细的边缘。我尝试了很多不同的 CSS 样式来解决这个问题，但没有任何效果。这是一个带有针迹的圆圈的代码:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 编辑 "radial"图表中 D3 SVG 的链接位置