Question

我使用 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>

Answer 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请求。

D3.js水平条形图和json文件中的数据

1 个答案: