我正在尝试使用 D3 显示一些简单的条形图,其中每个条形图都是一个 div
,但没有显示任何内容。
var chartData = [4, 8, 15, 16, 23, 42];
var body = d3.select('body');
var svg = body.append('svg')
.attr("width",800)
.attr("height",500);
var div = svg.append('div').attr('class', '.chart');
for (var i = 0; i < chartData.length; i++) {
div.append('div')
.attr("height", 20)
.attr("width", chartData[i]*10)
.html(chartData[i]);
}
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
当使用检查 SVG 时,我看到新创建的元素并且 svg 被突出显示但内部 div
没有。
最佳答案
简而言之:您不能将 HTML 元素附加到 SVG。原因很简单:<div>
, <p>
, <h1>
, <h2>
, <td>
, <li>
等等都不是有效的 SVG 元素。
这个问题已经被问过很多次了。但是,由于其中的特定部分(通常不会被问到),我想回答这个问题:
When using chrome's inspect I see the newly created elements.
是的,元素在那里。但这并不意味着它会起作用。
让我们在下面的片段中展示这一点,我在其中附加了 <div>
s 到 SVG。看看 console.log
, 它显示了 SVG 结构:
var svg = d3.select("svg");
var data = d3.range(5);
var divs = svg.selectAll("foo")
.data(data)
.enter()
.append("div")
.html("Where are you?")
var mySVG = (new XMLSerializer()).serializeToString(svg.node());
console.log(mySVG)
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
您可以看到 div 在 DOM 中。然而,屏幕上什么都没有……
您在 DOM 中看到该元素这一事实没有任何意义,因为您可以附加任何内容!
例如,让我们附加一个名为 CharlesDarwin
的元素:
var svg = d3.select("svg");
var data = d3.range(5);
var divs = svg.selectAll("foo")
.data(data)
.enter()
.append("CharlesDarwin")
.html("I'm a strange tag!")
var mySVG = (new XMLSerializer()).serializeToString(svg.node());
console.log(mySVG)
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
可以看到<charlesDarwin>
在 DOM 中。但是,很明显,SVG 中不会显示任何内容。
PS:关于您的图表:
- 去掉那个 for 循环。使用 D3 时不需要它;
- 设置类不带点;
- 如上所述,将 div 附加到正文。
这是工作代码:
var chartData = [4, 8, 15, 16, 23, 42];
var body = d3.select('body');
var div = body.selectAll("foo")
.data(chartData)
.enter()
.append('div')
.attr('class', 'chart')
.style("width", d => d * 10 + "px")
.html(d => d);
.chart {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
关于javascript - 使用 D3 附加到 SVG 的元素未出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42714091/