Question

我正在尝试从json文件创建条形图，这是一个URL，但我无法这样做，请帮助我，因为我是d3的新手。代码在这里请告诉我我在哪里犯错误。

var width = 960,
  height = 500;
var y = d3.scale.linear().range([height, 0]);
var chart = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

generateChart();

function generateChart() {
  d3.json('http://dataserver.org:8009/topic/domain/cancer',
    function(error, data) {
      y.domain([0, d3.max(data, function(d) {
        return d.occurrence
      })]);
      var barWidth = width / data.length; //width of each bar
      var bar = chart.selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", function(d, i) {
          return "translate(" + i * barWidth + ", 0)";
        });
      bar.append("rect")
        .attr("y", function(d) {
          return y(d.occurrence);
        })
        .attr("height", function(d) {
          return height - y(d.occurrence);
        })
        .attr("width", barWidth - 1);
      bar.append("text")
        .attr("x", barWidth / 2)
        .attr("y", function(d) {
          return y(d.occurrence) - 10;
        })
        .attr("dy", ".75em")
        .text(function(d) {
          return d.authorName;
        });
    });
};

Answer 1

我检查您的API时，这不是跨域问题。假设您从CDN获取d3.js，我建议进行更改。您的图表将取决于“机构”，因为它包含图表的所有必需值。所以我根据API的响应结构改变了它。

**在某些情况下，数据显示为“未定义”，因此我从CDN获取d3.js

这是整个修改过的文件： -

function generateChart() {
d3.json('http://srvgal78.deri.ie:8009/topic/domain/cancer',
function(error, data) {

    data = data.institute;

  y.domain([0, d3.max(data, function(d) {
    return d.occurrence
  })]);


  var barWidth = width / data.length; //width of each bar
  var bar = chart.selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function(d, i) {
      return "translate(" + i * barWidth + ", 0)";
    });
  bar.append("rect")
    .attr("y", function(d) {
      return y(d.occurrence);
    })
    .attr("height", function(d) {
      return height - y(d.occurrence);
    })
    .attr("width", barWidth - 1);
  bar.append("text")
    .attr("x", barWidth / 2)
    .attr("y", function(d) {
      return y(d.occurrence) - 10;
    })
    .attr("dy", ".75em")
    .text(function(d) {
      return d.authorName;
    });
});

};

无法使用URL从d3创建条形图

1 个答案: