如何突出最大值和最小值點的線型圖

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/