Question

我对d3.js相当陌生，并且正在慢慢探索。到目前为止，我只尝试创建一个条形图，以了解从json文件加载数据的位置，当我单击条形图时，它将数据更改为json的另一列。

json文件的格式如下：

[
  {
    "ym": "201801",
    "clients": 179,
    "trans": 987,
  },
  {
    "ym": "201802",
    "clients": 178,
    "trans": 334,
  }
]

每当我加载页面时，一切都很好，图表也已加载，并且一切正常。但是，当我单击条形图时，轴会更改，文本也会更改，但条形图不会出现。我检查了控制台，并且有多次：

d3.v4.min.js:2 Error: <rect> attribute y: Expected length, "NaN".
(anonymous) @ d3.v4.min.js:2
d3.v4.min.js:2 Error: <rect> attribute height: Expected length, "NaN".

我真的不知道发行的内容可能在这里。还有另一个具有相同错误的线程，其中的问题是数据是字符串而不是数字，但这在这里似乎不是问题。基本上我有两个相同的功能，因此当我单击条时，它只应更改条的颜色，但是，条仍然不见了。这里的函数代码（类似于页面加载时生成图表的代码）：

function alter_show() {

d3.json("testV.json", function(data) {

var y = d3.scaleLinear().range([height,1]);
var x = d3.scaleBand().rangeRound([0, width]);

y.domain([1,d3.max(data,function(d) {return d.clients})]);
x.domain(data.map(function(d) {return d.ym}));

svg.select(".x.axis").call(d3.axisBottom(x))
svg.select(".y.axis").call(d3.axisLeft(y))


bar = svg.selectAll("rect")         

bar.data(data).enter().append("rect")
    .attr('class','bar')
    .attr("x", function (d) {return x(d.ym); })
    .attr("y", function (d) {return y(d.clients); })
    .attr("height", function (d) {return height - y(d.clients)})
    .attr("width", x.bandwidth()*0.5)
    .attr("color","black")
    .attr("transform",
      "translate(" + (margin.left + x.bandwidth()*0.25) + "," + margin.top + ")")
    .on('mouseenter', function() {
        d3.select(this).transition().duration(100).attr('opacity',0.5).attr('color', 'orange')})
    .on('mouseleave', function() {
        d3.select(this).transition().duration(100).attr('opacity',1)})
    .on('click',alter_show);


svg.append("g").selectAll("text").data(data).enter().append("text")
    .attr('class','value')
    .attr("x", function (d) {return x(d.ym); })
    .attr("y", function (d) {return y(d.trans); })
    .text(function (d) {return d.trans})
    .attr('font-size','0.7em')
    .attr("transform",
      "translate(" + (margin.left + x.bandwidth()*0.25)  + "," + (margin.top + 30) + ")");

bar.exit().remove();
  // updated data:
  bar.transition()
    .duration(750)
    .attr("y", function(d) {
      return y(d.value);
    })
    .attr("height", function(d) {
      return height - y(d.value);
    })});}

总而言之，此功能在我加载页面时起作用，但是当我单击条形图时，它不会显示条形图。感谢您的帮助，如果您需要其他信息，请告诉我：）

Answer 1

数据value字段在哪里？

bar.transition()
    .duration(750)
    .attr("y", function(d) { return y(d.value); })
    .attr("height", function(d) { return height - y(d.value); });

您必须自己解决图表的所有其他问题。

d3.scaleLinear第二次调用时返回NaN

1 个答案: