Question

我正在尝试使用来自世界地图的点击数据制作条形图。当用户点击某个国家/地区时，该图表会返回我想要制作条形图的某些数据（对于此特定问题，我只需要1个小节）。数据[索引]，我希望在我的条形图中可视化，在这个特定的例子中，当我在console.log（）时看起来像这样：

Object {CountryName: "United States", CountryCode: "USA", GDP: 17419000000000, Variable: 24}

我已经修复了X轴和Y轴，但到目前为止，它仍然会生成原始数据中其他国家/地区的所有条形图。任何人都可以向我解释我如何从上面的对象在我的条形图中制作一个单独的条形图？

为了绘制条形图，我得到了以下代码：

// draw the bars
        svg.selectAll(".bar")
        .data(data)
        .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("id", function(d) { return (d.CountryName); })
            .attr ({
                "x": function(d) {return xScale(d.CountryCode);},
                "y": function(d) {return yScale(d.Variable);},
                "width": xScale.rangeBand(),
                "height": function(d) { return height - yScale(d.Variable);}
            })
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);

感觉就像我尝试了一切让它发挥作用。任何帮助将不胜感激！感谢。

Answer 1

我只需将对象推入数组并从此数组中绘制条形图。

var datatemp = [];

datatemp.push(data)

// draw the bars
        svg.selectAll(".bar")
        .data(datatemp)
        .enter()    
            .append("rect")
            .attr("class", "bar")
            .attr("id", function(d) {return d.CountryName })
            .attr ({
                "x": function(d) {return xScale(d.CountryName);},
                "y": function(d) {return yScale(d.Variable);},
                "width": xScale.rangeBand(),
                "height": function(d) { return height - yScale(d.Variable);}
            })
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);

用一个数据对象制作条形图

1 个答案: