Question

这是我的d3.js代码

<html>
<head>
    <title>D3 Test</title>

</head>
<body>
    <script type="text/javascript" src="d3/d3.v2.js"></script>
    <script type="text/javascript">
        var w = 400,
            h = 400,
            padding = 31,
            p = 10,
            barwidth = 10;
        var data = [{count:200,year:2008},
                    {count:240,year:2010},
                    {count:290,year:2009}];
        var bar_height = d3.scale.linear()
                        .domain([d3.max(data, function(d) { return d.count; }), 0] )  // min max of count
                        .range([p, h-p]);
        var bar_xpos = d3.scale.linear()
                        .domain([2005, d3.max(data, function(d) { return d.year; })] )  // min max of year
                        .range([p,w-p]);
        var xAxis = d3.svg.axis()
                    .scale(bar_xpos)
                    .orient("bottom")
                    .ticks(5);  //Set rough # of ticks

        var yAxis = d3.svg.axis()
                    .scale(bar_height)
                    .orient("left")
                    .ticks(5);

        var svg = d3.select("svg")
                    .attr("width", w)
                    .attr("height", h);

        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + (h - padding) + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + padding + ",0)")
            .call(yAxis);

        svg.selectAll("rect")
            .data(data)
            .enter().append("rect")
            .attr("x", function(d) {
                return bar_xpos(d.year); })
            .attr("y", function(d) { 
                return bar_height(d.count); })
            .attr("width", barwidth)
            .attr("height", function(d) {return h - bar_height(d.count) - padding; })
            .attr("fill", "steelblue")  
    </script>
</body>

此代码在http://enjalot.com/inlet/4132552/处理正常但是当我在一个html文件中尝试这个时，它不起作用。

Answer 1

将你的svg附加到身体或div。

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

工作正常

d3js代码在在线编辑器中工作但不在html文件中

1 个答案: