0

目前我正在尝试绘制一个只有 4 年时间线的热图。我的数据包含 1996,2006,2015,2016 年的值。但是它之间的年份没有任何值。

我想知道仅显示数据中设置的年份是否有任何价值。

我的图表目前看起来像这样： HeatMap Image。但是我希望它只显示数据集中的年份，而不是 2016-1996 之间的所有年份。我缺少这个内置功能吗？

这是我的代码示例

var tree = d3plus.viz()
        .container("#myDiv")
        .data(reformatted)
        .title({
            "value": title
        })
        .font({
            "family": "Open Sans",
            "size":16,
            "color":  "#2D7CBE",
        })

        .type("tree_map")
        .id(categoryDropdown)
        .size(xAxisDropdown)
        .labels({"align": "center", "valign": "top"})
        .time({"value":timeDropdown, "solo": yearsArr[0] })
        .resize(true)
        .color({
            scale:colorpicker
        })
        .draw();

在这种情况下，solo 设置为在 yearsArr 的第一年开始图表。yearsArr 是 [1996,2006,2015,2016]。timeDropdown 从数据对象中获取时间值。

这是我当前代码示例的链接https://codepen.io/Wils0751/pen/ZoYwEb

对我的问题的任何见解都会有很大帮助谢谢！

4

1 回答 1

0

您只想显示数据集中的年份而不是 2016-1996 之间的所有年份

使用不同的比例：

scaleTime() 或 scaleLinear()
它获取数据的最小值和最大值的域值，并获取宽度的范围，因此它将正确显示

scaleBand()
它只计算您输入的数组的比例

使用scaleBand()会帮助你，阅读 d3 文档 api 了解更多信息

或者你可以在绘制时过滤函数，比如

function(d,i){
  if(d ==  1996){
  return d
 }
}

您没有发布您的工作简单代码，我不知道您的代码，也许这会有所帮助

当我搜索你的问题时，我发现了这个

.ui([
  {
    "method" : "size",
    "value"  : [ '1996', '2015' , '2016' ]
  }]
   )

改变

.time({"value":timeDropdown, "solo": yearsArr[0] })

到那个，但点击功能不再起作用

于 2018-04-18T03:24:18.900 回答