Question

我在热图旁边创建了一个热图和迷你图。

代码中存在错误，因为迷你图不正确。热图数据的趋势与迷你图的趋势不同。似乎数据被反向读取。为什么呢？

然后，有一些数据缺失（红色）。我希望在那种情况下，迷你线破灭或丢失。我怎么能这样做？

假设迷你图是正确的......

现在我希望当用户将鼠标悬停在热图的单元格上时，相应的迷你图上会显示一个红点。另一方面，当用户将鼠标悬停在迷你图上时，会突出显示热图中的相应单元格。

我希望一些图纸更清晰：

我以为我可以在此时更改代码：

var cells = svg.selectAll('rect')
    .data(data)
    .enter()
    .append('g')
    .append('rect')
    //...
    .on('mouseover', tip.show) // <- HERE
    .on('mouseout', tip.hide);

我应该跟踪鼠标所在的矩形，并以某种方式将这些数据传递给控制迷你线的代码片段。但我真的不知道怎么做，我也没有找到类似的例子。

谢谢！

Answer 1

您在这里提出了三个不同的问题，这些问题肯定会使您的问题符合过于宽泛的要求。关于迷你线，我正在回答前两个问题，因为它们是相关的。我建议您将mouseover问题作为新帖子发布。

回到问题：

出现倒置的迷你图的问题很容易解决，只是反转y比例的范围：

var y = d3.scaleLinear().domain([0, maxYvalue]).range([itemSize-2, 2]);

缺少值的问题有点复杂。首先，你正在使用......

const sparkData = groupedData[key].map(function(datum) {
    return Number(datum['m2']);
})

...将所有缺失的数据（空字符串）转换为0。这样，你根本无法从缺失的数据中找出真正的零。

但是，假设您确实不想显示0（在您的代码中与缺失的数据相同），您可以在行生成器中使用defined：

var line = d3.line()
    .defined(function(d){
        return d
    })

或更明确地说：

var line = d3.line()
    .defined(function(d){
        return d !== 0
    });

最后，第三个迷你图中的最后一个值（不会丢失）将不会显示，因为您无法创建仅包含一个值的行...为了显示该值，您必须编写自定义方法。< / p>

以下是更新的Plunker：http://plnkr.co/edit/JU11yj6p3VNtCBs5pjUF?p=preview

热图和迷你图上的工具提示

1 个答案: