Question

我有一个包含7种不同酒吧列表的多条形图。日期位于x轴上，十进制值位于y轴上。其中一些列表的十进制值为空字符串（“”），它们的图形为0.000。我不希望这些出现。我尝试使用chart.yDomain。（[0,3]）;并将空值设置为-1并且它们不会显示在图形上，但条形之间的间距与绘制图形时的间距相同。

我也尝试过不将空值对放入图形基准数组中，但是这会弄乱日期排序，因为并非每个列表都有每个日期的值。

以下是我用于图表的JSON数据示例：

"x_data":["08\/15\/13","11\/11\/13","11\/13\/13","11\/14\/13","11\/18\/13","11\/19\/13","11\/20\/13","11\/25\/13","12\/05\/13","12\/09\/13","12\/11\/13","12\/12\/13"],
"y_data":[[["","","","","","","",0.875,"",0.41,"",""]],[["","","","","","","","",0.285,"",0.92,""]],[["",0.203,0.17,0.223,0.193,0.303,0.263,"","","","",""]],[["",0.433,0.333,0.665,0.353,0.413,0.458,"","","","",""]],[["",0.355,0.3,0.263,0.258,0.355,0.215,"","","","",""]],[["",0.195,0.43,0.243,0.28,0.44,0.4,"","","","",""]],[[1.218,"","","","","","","","","","",""]]]}

以下是未设置域名时的外观屏幕截图： http://i.imgur.com/TO3wwWF.png?1

以下是我设置域时的外观屏幕截图： http://i.imgur.com/NEwgkJf.png?1

Answer 1

由于您没有提供小提琴或等效内容，因此无法提供复制粘贴答案，但一般方法是在创建图表之前从数据中删除空值。

由于示例中的数据格式不像D3.js所期望的那样，我假设您不是简单地使用D3的内置请求函数（例如d3.json('url/to/data.json')）来获取它，而是将数据放在局部变量中。假设您还想保留上面的结构，您可以执行以下操作。（它没有进行优化以使逻辑尽可能清晰。）

var cleandata = {
    x_data: [],
    y_data: []
};
data.y_data.forEach(function(y_value, idx){
    if (y_value) {
        cleandata.x_data.push(data.x_data[idx]);
        cleandata.y_data.push(data.y_data[idx]);
    }
})

d3.js如何绘制超出范围的值？

1 个答案: