2

我正在研究一个可重复使用的条形图示例，并让它与一个简单的数组一起工作。但是，由于我通过 json 对象添加了更多数据，因此我无法再让它工作。我包含的其他数据是添加到可视化中所必需的维度和标签。我正在使用 d3.v3.js。

  • 澄清一下，这是针对水平条形图而不是垂直（柱形）图。

这是一个简化的 json 对象：

var module_1_data = [
    {"dimension1": "snow is fun",
     "dim1_label": "campaign",
     "metric1": 15,
     "met1_label": "clicks"
    }, 
    {"dimension1": "painting for art", 
     "dim1_label": "campaign",
     "metric1": 22,
     "met1_label": "clicks"
    }
];

这是我的 html 页面中对 bar_chart 函数的调用：

bar_chart("220","400",module_1_data,"1")();

这是可重用的_bar_chart.js：https ://gist.github.com/analyticsPierce/5144641

这是包含完整 json 对象的完整示例页面的 html：https ://gist.github.com/analyticsPierce/5154104

我还将这个示例页面添加到我的网站：http: //www.marketingscience.co/example_d3/bar_chart_example.html

我得到的错误信息是：

错误：属性 width="NaN" 的值无效 >

我可以控制台记录 bar_chart 函数中的宽度，我可以控制台记录 metric1 通过 data[0].metric1 中的值。但是，当我包含匿名函数时，它似乎失败了，我无法 console.log d。

我感谢任何帮助或建议。

4

2 回答 2

2

你有两个主要问题。1.您没有向数据方法提供数据数组 2.您正在将非数字数据填充到宽度和高度属性中。

首先，查看第 23 和 39 行：

bar_chart.selectAll("line")
        .data(x.ticks(10))

和

bar_chart.selectAll("text")
        .data(function(d) { return d.metric1; })

您没有为选择提供数据。您正在提供回调来处理数据点，但尚未绑定数据。

data 方法接受要绘制的数据元素数组。你应该这样做： bar_chart.selectAll("text") .data(data) // 提供传入的数据数组

然后对各个数据点使用回调。

此外，您似乎正在为您的矩形宽度定义一些时髦的东西。你去：

 var x = d3.scale.linear()
      .domain([0, d3.max(function(d, i) { return d.metric1; } )])
      .range([0, 420]);  
      console.log("x: " + x[1]);
    var y = d3.scale.ordinal()
      .domain(function(d) { return d.metric1; })
      .rangeBands([0, 120]);  

    bar_chart.selectAll("line")
        .data(x.ticks(10))
      .enter().append("line")
        .attr("x1", x)
        .attr("x2", x)
        .attr("y1", 0)
        .attr("y2", 120)
        .style("stroke", "#ccc");

    bar_chart.selectAll("rect")
        .data(data)
      .enter().append("rect")
        .attr("y", y)
        .attr("width", x)
        .attr("height", y.rangeBand());

您正在为矩形元素的宽度和高度指定对象。这些应该只是数字。

您可能只想先尝试使用硬编码数据创建图形，然后以编程方式提供数据。

现在这可能是一个好的开始。

于 2013-03-12T17:13:06.670 回答
2

首先，查看第 15 行和第 39 行。在每一行中，您调用一个带有两个参数的方法：

  1. 一组数据
  2. （可选）一个关键方法

在这两种情况下，您都缺少数据数组。

/* line 15 */ d3.max(MISSING_DATA_ARRAY, function(d, i) { return d.metric1; } )

和

/* line 38/39 */ bar_chart.selectAll("text").data(MISSING_DATA_ARRAY, function(d) { return d.metric1; })

第 39 行的修复将解决您的“metric1 is undefined”错误

其次，当您使用数字数组时，第 35 行效果很好。现在您正在使用对象，您会遇到麻烦，因为x它是一个基于作为参数传递的数据点返回正确宽度的函数。当参数是一个数字时，这很酷，当它是一个对象时，函数不知道如何进行数学运算。

所以，在第 35 行，替换：

.attr("width", x)和.attr("width", function(d){ return x(d.metric1); })

这两个修复的组合将解决您的 width="NaN" 错误。

于 2013-03-12T18:27:43.170 回答