如何突出最大值和最小值点的线型图

Question

我使用dc.js线型图和条形图。现在我需要用'renderArea（true）'在lineChart上标记最大值和最小值。

我想是在下面的图片或者也许别的东西，但我不知道如何添加此功能。

更新：

戈登的回答是完美的。不幸的是，我的图表没有显示在标记点与“鼠标悬停”的提示

还有一个更新：

我怎样才能变焦后重绘这些问题？

Answer 1

这并不是dc.js直接支持的东西，但你可以注释图表与renderlet。令人高兴的是，当你需要像这样的自定义注释时，dc.js可以很容易地逃脱到d3。

我们将使用默认的折线图在每个数据点（这只有当他们上空盘旋出现）绘制看不见的点的事实。我们将从这些坐标中获取坐标，并使用它们在另一图层中绘制或更新自己的点。

通常我们想使用一个转变前的事件处理程序，但这些点似乎并不具备，直至过渡后的位置，所以我们必须处理，而不是renderlet事件：

chart.on('renderlet', function(chart) { // 1 
    // create a layer for the highlights, only once 
    // insert it after the tooltip/dots layer 
    var highlightLayer = chart.select('g.chart-body') // 2 
    .selectAll('g.highlight-dots').data([0]); 
    highlightLayer 
    .enter().insert('g', 'g.dc-tooltip-list').attr('class', 'highlight-dots'); 
    chart.selectAll('g.dc-tooltip').each(function(_, stacki) { // 3 
    var dots = d3.select(this).selectAll('circle.dot'); // 4 
    var data = dots.data(); 
    var mini = 0, maxi = 0; 
    data.forEach(function(d, i) { // 5 
     if(i===0) return; 
     if(d.y < data[mini].y) 
     mini = i; 
     if(d.y > data[maxi].y) 
     maxi = i; 
    }); 
    var highlightData = [mini, maxi].map(function(i) { // 6 
     var dot = dots.filter(function(_, j) { return j === i; }); 
     return { 
     x: dot.attr('cx'), 
     y: dot.attr('cy'), 
     color: dot.attr('fill') 
     } 
    }); 
    var highlights = highlightLayer.selectAll('circle.minmax-highlight._' + stacki).data(highlightData); 
    highlights 
     .enter().append('circle') // 7 
     .attr({ 
     class: 'minmax-highlight _' + stacki, 
     r: 10, 
     'fill-opacity': 0.2, 
     'stroke-opacity': 0.8 
    }); 
    highlights.attr({ // 8 
     cx: function(d) { return d.x; }, 
     cy: function(d) { return d.y; }, 
     stroke: function(d) { return d.color; }, 
     fill: function(d) { return d.color; } 
    }); 
    }); 
}); 

这是相当复杂的，所以让我们来看看它一步一步：

1. 我们希望听到的renderlet事件，一切都已经转变
2. 我们将创建另一个层之后触发。该.data([0]).enter().insert(stuff)诀窍是d3 general update pattern的退化情况，只是确保项目被添加一次。我们对现有工具提示/点层作为第二个参数，选择指定.insert()，为了在DOM顺序，这意味着后面把该层之前。此外，我们将坚持update selection，因为它是插入节点或现有节点。
3. 我们通过每一个提示，点
4. 在每个堆栈的堆栈的迭代，我们将选择现有的所有点，
5. 和遍历所有的数据，发现最小和最大的索引mini和maxi。
6. 现在我们将创建一个用于绑定到最小/最大高亮点的两元素数据数组，从现有点中提取数据现在我们终于准备好绘制东西了。我们将使用相同的简并更新模式绘制两个点与minmax-highlight _1类，_2等。
7. 并使用颜色和我们在步骤想起6

注意，对于每个堆叠的最小和最大不一定是相同的总最小和最大位置，从而突出显示的点较高的堆可能不是最高点或最低点。

不是那么简单，但也不是太如果你愿意做一些d3黑客攻击，很难。

例小提琴：http://jsfiddle.net/gordonwoodhull/7vptdou5/31/