Question

尝试使用D3显示一些简单的条形图，但没有显示任何内容。

<style>
    .chart div {
      font: 10px sans-serif;
      background-color: steelblue;
      text-align: right;
      padding: 3px;
      margin: 1px;
      color: white;
    }
</style>


<script src="d3.v3.js"></script>
<script>

    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]);
    }

</script>

当使用chrome的检查时，我看到新创建的元素并且svg突出显示但不是内部div的谢谢。

Answer 1

简而言之：无法将HTML元素附加到SVG。原因很简单：<div>，<p>，<h1>，<h2>，<td>，<li>等不是有效的SVG元素。< / p>

这已被多次询问和回答。但是，我想回答这个问题，因为它的一个特定部分（通常不会被问到）：

使用chrome检查时，我会看到新创建的元素。

是的，元素在那里。但这并不意味着它会起作用。

让我们在下面的代码段中展示这一点，其中我将<div>附加到SVG。查看console.log，它显示了SVG结构：

＆＃13;

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)

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

＆＃13;

你可以看到div在DOM中。但是，屏幕上没有任何内容......

你在DOM中看到元素的事实意味着什么，因为你可以附加任何东西！

例如，让我们追加一个名为CharlesDarwin的元素：

＆＃13;

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)

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

＆＃13;

您可以在DOM中看到<charlesDarwin>。但是，显而易见的是SVG中不会出现任何内容。

PS ：关于您的图表：

摆脱for循环。使用D3时，您不需要这样做;
设置类，不带点;
如上所述，将div添加到正文中。

这是工作代码：

＆＃13;

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);

＆＃13;

.chart {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

D3没什么显示

1 个答案: