CSS高度和宽度不适用于SVG

Question

我想在图表中添加标题。 像这样：

我尝试了append.svg，append.text ....等 但似乎没什么用。我，我只是无法为其编写正确的CSS 我猜这个。

此代码可用：

header= d3.select("svg").append("text")
    .attr("x", 70)             
    .attr("y", 20)
    .style("font-size", "16px") 
    .style("text-decoration", "underline")  
    .text("My graph heading...");

但我在这个问题上有问题，因为我无法做到 为其指定宽度和高度以及背景填充。 当我指定宽度或高度时，它就会被应用。 将显示更改为阻止也无效...

运行上面的代码会产生如下图： 我目前的图片图片

Answer 1

试试这个：

d3.select('svg').append('rect')
    .attr('x', 70)
    .attr('y', 20)
    .attr('width', 200)    // <-- your width here
    .attr('height', 100)   // <-- your height here
    .style('fill', 'red'); // <-- your color here

d3.select('svg').append('text')
    .attr('x', 170)      // <-- middle horizontal point of the rect (width/2 + leftMargin)
    .attr('y', 70)       // <-- middle vertical point of the rect (height/2 + topMargin)
    .attr('dy', '0.4em') // <-- tune this attribute to obtain perfect vertical alignment
    .style('text-anchor', 'middle') // keep your text centered
    .text('My graph heading...');

最后，您将获得：