Question

我正在研究一个可重复使用的条形图示例，并使用一个简单的数组。但是，由于我通过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（＆＃34; 220＆＃34;＆＃34; 400＆＃34;，module_1_data，＆＃34; 1＆＃34）（）;

这是reusable_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

我收到的错误消息是：

错误：属性宽度的值无效=＆＃34; NaN＆＃34; ＆GT;

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

我感谢任何帮助或建议。

Answer 1

你有两个主要问题。 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（ “文本”） .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());

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

您可能希望首先尝试使用硬编码数据创建图表，然后以编程方式提供传递数据。

这可能是一个好的开始。

Answer 2

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

数据数组
（可选）关键方法

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

/* 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未定义”错误

第二，当你使用一系列数字时，第35行很好。既然您正在使用对象，那么您会遇到麻烦，因为x是一个函数，它根据作为参数传递的数据点返回正确的宽度。当参数是一个数字时，它很酷，当它是一个对象时，该函数不知道如何进行数学运算。

所以，在第35行，替换：

.attr("width", x)

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

这两个修复的组合将解决你的width =“NaN”错误。

如何在d3.js可重用的图表模式中使用json对象

2 个答案: