Question

让我们说我创建了一个这样的简单图形：

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
  <svg></svg>
  <script>
    const svg = d3.select('svg');
    const g = svg.append('g');

    g.append('g')
      .selectAll('g')
      .data([5, 10, 20, 40])
      .enter()
      .append('rect')
      .attr('fill', 'green')
      .attr('x', d => d)
      .attr('y', d => d)
      .attr('height', d => d)
      .attr('width', d => d);
  </script>
</body>

</html>

＆＃13;

但是我想创建一个分离的<g>，而不是仅仅附加到它，然后可以随意附加（例如，它可以从函数返回）。

对于d3 V5，有一个d3.create()函数可以创建一个分离的元素。

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
  <svg></svg>
  <script>
    const svg = d3.select('svg');
    const g = svg.append('g');

    const detachedG = d3.create('g');
    detachedG.selectAll('g')
      .data([5, 10, 20, 40])
      .enter()
      .append('rect')
      .attr('fill', 'green')
      .attr('x', d => d)
      .attr('y', d => d)
      .attr('height', d => d)
      .attr('width', d => d);

    g.append(() => detachedG.node());
  </script>
</body>

</html>

＆＃13;

但即使DOM看起来相同，它也不会出现在浏览器中。

任何想法如何解决这个问题？

Answer 1

命名它：

const detachedG = d3.create('svg:g');

以下是具有该更改的代码：

＆＃13;

<!doctype html>
<html lang="en">
    <head><script src="https://d3js.org/d3.v5.min.js"></script></head>
    <body>
        <svg></svg>
        <script>
            const svg = d3.select('svg');
            const g = svg.append('g');

            const detachedG = d3.create('svg:g');
            detachedG.selectAll('g')
                .data([5,10,20,40])
                .enter()
                .append('rect')
                .attr('fill', 'green')
                .attr('x', d => d)
                .attr('y', d => d)
                .attr('height', d => d)
                .attr('width', d => d);

            g.append(() => detachedG.node());
        </script>
    </body>
</html>

＆＃13;

解释

当使用append()方法附加SVG元素时，98.47％的D3程序员不使用命名空间（来源：Fakedata Inc.）。因此，而不是：

selection.append("svg:rect")

我们只是这样做：

selection.append("rect")

那么，为什么你需要一个命名空间呢？

在内部，d3.create使用d3.creator使用document.documentElement调用它：

export default function(name) {
    return select(creator(name).call(document.documentElement));
}

这会更改this方法的d3.creator。当我们使用append（内部使用d3.creator）创建SVG元素时，我们通常不会使用命名空间，因为：

如果未指定名称空间，则名称空间将从父元素继承。

但是，由于使用document.documentElement作为this，在这种情况下，名称空间变得必要。

Answer 2

SVG 提供了不同的形状，如直线、矩形、圆形、椭圆等。因此，使用 SVG 设计可视化可以让您在实现目标时更加灵活和强大。

    var width = 500;
    var height = 500;

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

    //Create line element inside SVG
    svg.append("line")
       .attr("x1", 100)
       .attr("x2", 500)
       .attr("y1", 50)
       .attr("y2", 50)
       .attr("stroke", "black")

know more

使用d3.create

2 个答案:

解释