Question

我正在尝试使用d3追加svg，如下所示：

<!DOCTYPE html>
<html>
<style>

body {
  font: 10px sans-serif;
}

.line {
  fill: yellow;
  stroke: steelblue;
  stroke-width: 2.5px;
}

svg {
    border: 5px;
    height: 500px;
    width: 1200px;
    margin: 10px;
    min-width: 100px;
    min-height: 100px;
}

</style>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
d3.select("body").append("svg")
    .append("path")
    .attr("class", "line")
    .attr("d", "M 100 100 L 300 100 L 200 300 z");

</script>

<body>
</body>
</html>

不幸的是，这并没有显示任何内容。另一方面，如果用以下内容替换最后三行，那么我得到一个三角形。

<body>
<svg><path class="line" d="M 100 100 L 300 100 L 200 300 z"></path></svg>
</body>
</html>

我无法弄清楚为什么会这样。请帮忙。

Answer 1

我会猜测还有其他错误，或者你的script没有正确加载，因为它在这个小提琴中工作正常：

http://jsfiddle.net/2aK2S/

尝试加载d3中的<head>？（您在页面上看不到的内容）

Answer 2

你错过了＆lt; head＆gt;标记并不包含＆lt; script＆gt;在＆lt; body＆gt;内标记：

<!DOCTYPE html>
<html>
  <head>
    <style>

    body {
      font: 10px sans-serif;
    }

    .line {
      fill: yellow;
      stroke: steelblue;
      stroke-width: 2.5px;
    }

    svg {
        border: 5px;
        height: 500px;
        width: 1200px;
        margin: 10px;
        min-width: 100px;
        min-height: 100px;
    }
    </style>
  </head>
  <body>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script>
    d3.select("body").append("svg")
        .append("path")
        .attr("class", "line")
        .attr("d", "M 100 100 L 300 100 L 200 300 z");

    </script>

  </body>
</html>

无法使用d3显示多边形

2 个答案: