d3概念问题，为什么/何时需要使用url()

Question

我有一个关于概念&d3中attr参数中url命令的用法。

我认为使用"url"的原因是将已经制作的属性信息带到新的定义的元素。这是一个固定的语法只用于制作d3中的剪辑路径吗？

我还没有看到任何其他使用"url"来分配元素属性的情况。在以下url("#clip"(中，

是在.attr('id'，'clip'(论点之后引入所有内容

var clip = Svg.append("svg").append('clipPath')
.attr("id", "clip")
.append("rect")
.attr("width", width )
.attr("height", height )
.attr("x", 0)
.attr("y", 0);
// Color scale: give me a specie name, I return a color
var color = d3.scaleOrdinal()
.domain(["setosa", "versicolor", "virginica" ])
.range([ "#440154ff", "#21908dff", "#fde725ff"])
// Add brushing
var brush = d3.brushX()                 // Add the brush feature using the d3.brush function
.extent( [ [0,0], [width,height] ] ) // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area
.on("end", updateChart) // Each time the brush selection changes, trigger the 'updateChart' function
// Create the scatter variable: where both the circles and the brush take place
var scatter = Svg.append('g')
.attr("clip-path", "url('#clip')")

如果url用于将信息放在"id"参数或"class"之后，下面的代码应该可以工作，但它不工作。

"url(("究竟做什么

var rects = svg.append('rect')
.attr('id','recta')
.attr('x',50)
.attr('y',50)
.attr('width',100)
.attr('height',100)
.style('fill','red')
var rects2 = svg.append('rect',"url(''#recta')")
console.log('a')

Answer 1

这：

var clip = Svg.append("svg").append('clipPath')
.attr("id", "clip")
.append("rect")
.attr("width", 200)
.attr("height", 200)
.attr("x", 0)
.attr("y", 0);
var scatter = Svg.append('g')
.attr("clip-path", "url('#clip')")

翻译成：

<svg>
<clipPath id="clip">
<rect width="200" height="200" x="0" y="0">
</clipPath>
<g clip-path="url('#clip')">
</svg>

这是一个g元素，属性clip-path由#clip的内容定义。

现在这个：

var rects = svg.append('rect')
.attr('id','recta')
.attr('x',50)
.attr('y',50)
.attr('width',100)
.attr('height',100)
.style('fill','red')
var rects2 = svg.append('rect', "url('#recta')")

翻译成：

<svg>
<rect id="recta" x="50" y="50" width="100" height="100" style="fill: red">
<rect>
</svg>

该参数只是被忽略。

有关URL链接的详细信息https://www.w3.org/TR/SVG2/linking.html