时间戳

首页 > 解决方案 > d3.js：SVG 条出现在 svg 区域之外

javascript - d3.js：SVG 条出现在 svg 区域之外

问题描述

我是 d3.js 的新手，我正在构建一个简单的条形图。下面显示的代码在浏览器窗口的最底部显示栏，而不是在 html 代码的 svg 区域内。

这是html代码：

<div class="C2_01">First paragraph.</div><br>

<div class="C2_02">Second paragraph.</div><br>

<svg></svg>
<script src="JS\D3_BarChart.js"></script>

<div class="C2_04">Third paragraph.</div>

这是 d3 javascript 代码：

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
          .attr("height","20%")
          .attr("width","20%");

svg.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
          .attr("height","250")
          .attr("width","30")
          .attr("x", function(d, i) {return (i * 60) + 25})
          .attr("y","50")
          .attr("fill","white");

我唯一的问题是，为什么条形图显示在 svg 区域之外，远离页面底部？

谢谢你的帮助。

标签： javascriptd3.jssvg

解决方案

我相信您需要选择现有的 svg 元素而不是附加一个新元素。

var svg = d3.select("svg") // Not append
          .attr("height","20%")
          .attr("width","20%");

查看白色背景上所有条的完整代码。 http://jsfiddle.net/jg83ed91/5/

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

d3.select("svg")
  .attr("height", "20%")
  .attr("width", "100%") // Full width to show all bars
  .selectAll("rect")
  .data(dataArray)
  .enter().append("rect")
  .attr("height", "250")
  .attr("width", "30")
  .attr("x", function(d, i) {
    return (i * 60) + 25
  })
  .attr("y", "50")
  .attr("fill", "black"); // On white background

推荐阅读