代码之家 › 专栏 › 技术社区 › Nibor

使用d3创建并附加分离的元素。创造

svg d3.js javascript

Nibor · 技术社区 · 7 年前

假设我创建了这样一个简单的图形:

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

但我想创建一个独立的 <g> 然后可以随意追加(例如,可以从函数返回)。

对于d3 V5 d3.create() 创建分离元素的函数。

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

但它不会出现在浏览器中,即使DOM看起来是一样的。

有没有办法解决这个问题?

1 回复 | 直到 7 年前

Gerardo Furtado 5 年前

仅为其命名名称空间:

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

以下是更改后的代码:

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

解释

添加SVG元素时 append() 方法,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。创建者 方法在使用创建SVG元素时,通常不使用名称空间 append (内部使用 d3。创建者 ),自:

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

但是,由于使用 文件文档元素 像 这 ,在这种情况下,名称空间是必需的。

推荐文章

WebDragon · 是否可以通过在html<SVG>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容?

5 月前

Paul Lovell · 为什么JavaScript中生成的SVG元素的大小与HTML中直接定义的SVG元素不同?

5 月前

man · CSS-如何具有或模拟仅适用于内部的半径边框

6 月前

McLaren · 增加笔划宽度属性后,图标将被裁剪

6 月前

docker compose · React Native中椭圆或圆角矩形视图周围的进度边界

10 月前

Lucas Martins Soares · 如何覆盖SVG图像的默认颜色?[副本]

10 月前

user2171796 · 两个M。。。Z序列相遇,背景颜色显现

10 月前

MarcelausZell · 调整svg的大小会导致额外的高度

10 月前

RaiuProGram · Svg evenoodd=“true”不起作用(用路径在Svg上打孔)

11 月前

compx · 当尝试使用Selenium选择svg时,NoSuchElements存在

11 月前