Question

目前我正在尝试绘制一个时间轴仅为4年的HeatMap。我的数据包含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的第一年启动图表。年份是[1996,2006,2015,2016]。 timeDropdown从数据对象中获取时间值的位置。

以下是我当前代码https://codepen.io/Wils0751/pen/ZoYwEb

示例的链接

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

Answer 1

您只想显示数据集中的年份，而不是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] })

，但点击功能不再起作用了

如何设置只有若干年的d3Plus时间轴？

1 个答案: