使用JSON的d3.js中的图形不完整

Question

I am trying to create a bar graph from JSON data. 我正在尝试从JSON数据创建条形图。 I tried following the example D3.js bar chart but my chart is only showing two of six x points and the some of the bar appear stacked behind the chart. 我尝试按照示例D3.js条形图进行操作，但我的图表仅显示六个x点中的两个，并且一些条形图堆叠在该图的后面。 The JSON looks like: JSON看起来像：

{"archive": [{"total_size": 13699.2, "source": "archive", "number_of_files": 136734813.0, "number_of_files_transferred": 153214.0}, 
{"total_size": 13209.57, "source": "gps", "number_of_files": 133545394.0, "number_of_files_transferred": 150179.0}, 
{"total_size": 86.94, "source": "doris", "number_of_files": 159744.0, "number_of_files_transferred": 183.0
{"total_size": 298.49, "source": "slr", "number_of_files": 1439700.0, "number_of_files_transferred": 704.0}, 
{"total_size": 212.71, "source": "vlbi", "number_of_files": 674539.0, "number_of_files_transferred": 134.0}
{"total_size": 27.81, "source": "glonass", "number_of_files": 319432.0, "number_of_files_transferred": 20.0}]}

(note the above is just one of many in a dictionary) （请注意，以上只是词典中的许多内容之一）

JavaScript code: JavaScript代码：

    d3.json("{% url "graphs" %}", function(error, data) {
        if (error) throw error;

        x.domain(d3.extent(data['archive'], function(d) { return d.source; }));
        y.domain([0, d3.max(data['archive'], function(d) { return d.total_size; })]);

        var xvals = function(d) { return d.source };
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

        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("GB");

        svg.selectAll(".bar")
                .data(data['archive'])
            .enter().append("rect")
                .attr("class", "bar")
                .attr("x", function(d) { return x(d.source); })
                .attr("width", x.rangeBand())
                .attr("y", function(d) { return y(d.total_size); })
                .attr("height", function(d) { return height - y(d.total_size); });

    });

Answer 1

You are using d3.extent improperly for setting domain on your x scale. 您d3.extent正确使用d3.extent在x比例尺上设置域。 From the docs , it returns min/max of your data and this is inappropriate for an ordinal scale. 从docs ，它会返回您的数据的最小值/最大值，这对于序数标度是不合适的。 Instead try: 而是尝试：

x.domain(data["archive"].map(function(d) { return d.source; }));

Full working code; 完整的工作代码；

 <!DOCTYPE html> <meta charset="utf-8"> <style> .bar { fill: steelblue; } .bar:hover { fill: brown; } .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .x.axis path { display: none; } </style> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script> var margin = { top: 20, right: 20, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.ordinal() .rangeRoundBands([0, width], .1); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); 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 + ")"); //d3.tsv("data.tsv", type, function(error, data) { // if (error) throw error; var data = { "archive": [{ "total_size": 13699.2, "source": "archive", "number_of_files": 136734813.0, "number_of_files_transferred": 153214.0 }, { "total_size": 13209.57, "source": "gps", "number_of_files": 133545394.0, "number_of_files_transferred": 150179.0 }, { "total_size": 86.94, "source": "doris", "number_of_files": 159744.0, "number_of_files_transferred": 183.0 }, { "total_size": 298.49, "source": "slr", "number_of_files": 1439700.0, "number_of_files_transferred": 704.0 }, { "total_size": 212.71, "source": "vlbi", "number_of_files": 674539.0, "number_of_files_transferred": 134.0 },{ "total_size": 27.81, "source": "glonass", "number_of_files": 319432.0, "number_of_files_transferred": 20.0 }] }; x.domain(data["archive"].map(function(d) { return d.source; })); y.domain([0, d3.max(data['archive'], function(d) { return d.total_size; })]); var xvals = function(d) { return d.source }; svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); 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("GB"); svg.selectAll(".bar") .data(data['archive']) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.source); }) .attr("width", x.rangeBand()) .attr("y", function(d) { return y(d.total_size); }) .attr("height", function(d) { return height - y(d.total_size); }); //}); </script>

使用JSON的d3.js中的图形不完整

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-11-10 18:03:01

使用JSON的d3.js中的图形不完整

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-10 18:03:01

解决方案1
1 已采纳 2015-11-10 18:03:01