Question

我试图根据this示例运行条形图。

 <body>
    </body>
    <script>
        var width = 960, height = 500;
        var margin = {top: 20, right: 20, bottom: 30, left: 40};

        //data
        var data = [ {"x":"A","y":0.15}, {"x":"B","y":0.10}, {"x":"C","y":0.35} ];

        //x and y Scales
        var xScale = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1);

        var yScale = d3.scale.linear()
            .range([height, 0]);

        //x and y Axes
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom");

        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .ticks(10, "%");

        //create svg container
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");        

        //create bars
        d3.selectAll(".bar")
            .data(data)
            .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return xScale(d.letter); })
            .attr("width", xScale.rangeBand())
            .attr("y", function(d) { return yScale(d.frequency); })
            .attr("height", function(d) { return height - yScale(d.frequency); });

        //drawing the x axis on svg
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        //drawing the y axis on svg
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Frequency");
    </script>

我所看到的只是Y轴而没有别的。我错过了什么？

Answer 1

您的代码有三个问题。首先，您需要设置比例的域。在示例中，执行此操作的代码是

x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

您需要适应您的变量名称和数据：

xScale.domain(data.map(function(d) { return d.x; }));
yScale.domain([0, d3.max(data, function(d) { return d.y; })]);

其次，在选择svg元素时需要使用.bar，以便将新条形附加到SVG：

svg.selectAll(".bar")
   .data(data)
   .enter()
   // etc

最后，您忘记在复制和粘贴时更改数据元素。您的代码仍应引用.letter和.frequency，应该是.x和.y：

.attr("x", function(d) { return xScale(d.x); })
.attr("width", xScale.rangeBand())
.attr("y", function(d) { return yScale(d.y); })
.attr("height", function(d) { return height - yScale(d.y); });

完整演示here。

无法使用d3.js从json数据创建条形图

1 个答案: