Question

我跟着这个tutorial在D3js中创建了一个简单的条形图，但我看不到任何图表！

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>
        <meta charset="utf-8">
        <title>Learning Javascript!</title>
        <link rel="stylesheet" href="main.css">
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>

        <h1>Learning Javascript and HTML/CSS!</h1>        
        <p class="special">This is the first parapgraph.</p>

        <div class="chart">
        </div>

    </body>
</html>

使用Javascript：

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });

Answer 1

您缺少使<div>可见的必要CSS。

演示：http://jsfiddle.net/6Qtd6/

添加：

.chart div {
    background-color:red;
    border:1px solid blue;
}

在d3js中创建基本条形图

1 个答案:

演示：http://jsfiddle.net/6Qtd6/