Question

我在这里关注d3这个很棒的教程 http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_modernizing_the_bar_chart

使用比例在本章中介绍条形图。现在我想从xml文件加载我的数据，但当然我的代码不起作用。我猜测在创建xScale和yScale变量时我得不到数据集的长度

这是xml文件

<data>
<value>5</value>
<value>10</value>
<value>53</value>
<value>19</value>
<value>61</value>
<value>25</value>
<value>22</value>
<value>18</value>
<value>15</value>
<value>13</value>
<value>11</value>
<value>12</value>
<value>15</value>
<value>20</value>
<value>18</value>
<value>17</value>
<value>16</value>
<value>18</value>
<value>23</value>
<value>25</value>
</data>

代码本身

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vjezba - 9.poglavlje - barchart</title>
    <script type="text/javascript" src="d3/d3.v3.js"></script>
    <style type="text/css">
        /* No style rules here yet */       
    </style>
</head>
<body>
    <script type="text/javascript">
    d3.xml("values.xml","application/xml", function(dataset) {

        var w = 600;
        var h = 250;

        //var dataset = [ 5, 10, 53, 19, 61, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
        //radi jednakog razmaka stupova             

        var xScale = d3.scale.ordinal()
                        .domain(d3.range(dataset.length))
                        .rangeRoundBands([0, w], 0.05);

        var yScale = d3.scale.linear()
                        .domain([0, d3.max(dataset)])
                        .range([0, h]);

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

        //Create bars       
        svg.selectAll("rect")
           .data(dataset.documentElement.getElementsByTagName("value"))
           .enter()
           .append("rect")
           .attr("x", function(d, i) {
                return xScale(i);
           })
           .attr("y", function(d) {
                return h - yScale(d);
           })
           .attr("width", xScale.rangeBand())
           .attr("height", function(d) {
                return yScale(d);
           })
           .attr("fill", function(d) {
                return "rgb(0, 0, " + (d * 10) + ")";
           });

    });
    /*
        //Create labels
        svg.selectAll("text")
           .data(xml.documentElement.getElementsByTagName("value"))
           .enter()
           .append("text")
           .text(function(d) {
                return d;
           })
           .attr("text-anchor", "middle")
           .attr("x", function(d, i) {
                return xScale(i) + xScale.rangeBand() / 2;
           })
           .attr("y", function(d) {
                return h - yScale(d) + 14;
           })
           .attr("font-family", "sans-serif")
           .attr("font-size", "11px")
           .attr("fill", "white");
    */          
    </script>
</body>

Answer 1

简单的错误。您需要使用“d.value”而不是“d”。您的示例数据只是一个数字数组，但您的JSON数据是具有“value”属性的对象数组。

试试看你的例子：

http://jsfiddle.net/5edkw/1/

因为我需要代码来发布jsfiddle链接...这里有你已经知道的代码片段：

 .attr("height", function(d) {
    return yScale(d.value);
 })

“/ 0 /”版本是您发布到pastebin的原始版本。

D3 - 使用条形图的比例从文件加载xml数据

1 个答案: