让我们说我创建了一个这样的简单图形:
<!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()
函数可以创建一个分离的元素。
<!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看起来相同,它也不会出现在浏览器中。
任何想法如何解决这个问题?
答案 0 :(得分:4)
命名它:
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>
&#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")