D3.js 水平条形图和来自 json 文件的数据答案

【问题标题】：D3.js horizontal bar chart and data from json fileD3.js 水平条形图和来自 json 文件的数据
【发布时间】：2013-12-11 10:21:47
【问题描述】：

我使用d3.js创建了一个水平条形图，数据也在js文件中。

但是现在我想要一个单独的 json 文件，我需要从那里检索数据并在 js 文件中使用。

我已经尝试过，但无法从 json 文件中访问数据。

这里是代码。

HTML

 <head>    
 <title>Enjalot's Bar</title>

 <script src="d3.v3.min.js"></script>
 </head>

JavaScript

 <script type="text/javascript">

 var data= [{"label":"1990", "value":16}, 
        {"label":"1991", "value":56}, 
        {"label":"1992", "value":7},
        {"label":"1993", "value":60},
        {"label":"1994", "value":22}
        ];

  var data_max = 60,
  num_ticks = 6,

  left_margin = 60,
  right_margin = 60,
  top_margin = 30,
  bottom_margin = 0;


  var w = 200,                        //width
    h = 200,                        //height
    color = function(id) { return '#00b3dc' };

  var x = d3.scale.linear()
    .domain([0, data_max])
    .range([0, w - ( left_margin + right_margin ) ]),
    y = d3.scale.ordinal()
    .domain(d3.range(data.length))
    .rangeBands([bottom_margin, h - top_margin], .5);


var chart_top = h - y.rangeBand()/2 - top_margin;
var chart_bottom = bottom_margin + y.rangeBand()/2;
var chart_left = left_margin;
var chart_right = w - right_margin;


var vis = d3.select("body")
    .append("svg:svg")
        .attr("width", w)
        .attr("height", h)
    .append("svg:g")
        .attr("id", "barchart")
        .attr("class", "barchart")

var rules = vis.selectAll("g.rule")
    .data(x.ticks(num_ticks))
.enter()
    .append("svg:g")
    .attr("transform", function(d)
            {
            return "translate(" + (chart_left + x(d)) + ")";});
rules.append("svg:line")
    .attr("class", "tick")
    .attr("y1", chart_top)
    .attr("y2", chart_top + 4)
    .attr("stroke", "#939597");

rules.append("svg:text")
    .attr("class", "tick_label")
    .attr("text-anchor", "middle")
    .attr("y", chart_top + 3)
    .attr("fill","#939597")
    .attr("font-size","0.667em")
    .text(function(d)
    {
    return d;
    });
var bbox = vis.selectAll(".tick_label").node().getBBox();
vis.selectAll(".tick_label")
.attr("transform", function(d)
        {
        return "translate(0," + (bbox.height) + ")";
        });

var bars = vis.selectAll("g.bar")
    .data(data)
.enter()
    .append("svg:g")
        .attr("class", "bar")
        .attr("transform", function(d, i) { 
                return "translate(0, " + y(i) + ")"; });

bars.append("svg:rect")
    .attr("x", right_margin)
    .attr("width", function(d) {
            return (x(d.value));
            })
    .attr("height", y.rangeBand())
    .attr("fill", color(0))
    .attr("stroke", color(0));


//Labels
var labels = vis.select("g.bar")
    .append("svg:text")
        .attr("class", "label")
        .attr("x", 0)
        .attr("text-anchor", "right")
        .attr("transform", "rotate(270)")
        .attr("y", 40)
    .attr("x", -55)
        .attr("dy", ".71em")
        .text("Depts")
        .style({"text-anchor":"end","font-size":"0.667em","fill":"#939597"});

var bbox = labels.node().getBBox();



labels = vis.selectAll("g.bar")
    .append("svg:text")
    .attr("class", "value")
    .attr("fill","#fff")
    .attr("font-size","0.667em")
    .attr("x", function(d)
            {
            return 65;
            })
    .attr("text-anchor", "start")
    .text(function(d)
    {
    return "" + d.value + "%";
    });

bbox = labels.node().getBBox();
vis.selectAll(".value")
    .attr("transform", function(d)
    {
        return "translate(0, " + (y.rangeBand()/2 + bbox.height/4) + ")";
    });

//Axes
vis.append("svg:line")
    .attr("class", "axes")
    .attr("x1", chart_left)
    .attr("x2", chart_left)
    .attr("y1", chart_bottom)
    .attr("y2", chart_top)
    .attr("stroke", "#939597");
 vis.append("svg:line")
    .attr("class", "axes")
    .attr("x1", chart_left)
    .attr("x2", chart_right+120)
    .attr("y1", chart_top)
    .attr("y2", chart_top)
    .attr("stroke", "#939597");

</script>

【问题讨论】：

标签： javascript json d3.js bar-chart

【解决方案1】：

你需要这样的东西来访问 JSON 文件

d3.json("path/to/file.json", function(error, json) {
  // since this function is asynchronous,
  // you can't access data outside it
  // So do pass the json into the the function that needs it
  if (error) return console.warn(error);
  someFunc(json);
});

function someFunc(data) {
    ....
}

阅读此wiki，了解 D3 中的 xhr 请求。

【讨论】：

我已尝试使用以下代码，但如果我访问数据，它是未定义的。 var data= d3.json("bardata.json", function(error, data) { data.forEach(function(d) { d.frequency = +d.frequency; }); });
您的代码 sn-p 错误。先声明data，然后在函数内部将json赋值给data。 @User1
@User1。另外，请确保 json 文件与使用它的 html 文件位于同一目录中
var 数据； data=d3.json("bardata.json", function(error, data) { data.forEach(function(d) { d.frequency = +d.frequency; console.log(d.data); }); } );
像这样告诉你，var data； data=d3.json("bardata.json", function(error, data) { data.forEach(function(d) { d.frequency = +d.frequency; console.log(d.data); }); } );而且json也只在同一个目录下。