使用d3.create

时间:2018-04-24 10:23:36

标签: javascript d3.js svg

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



<!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;
&#13;
&#13;

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

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

&#13;
&#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;
&#13;
&#13;

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

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

2 个答案:

答案 0 :(得分:4)

命名它:

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

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

&#13;
&#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;
&#13;
&#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,在这种情况下,名称空间变得必要。

答案 1 :(得分:-1)

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