D3加圈到一個多圖表 - 對我有在那裏我其具有不同的顏色在各行中的多線圖上繪製圓圈的問題圈

Question

的頂圈（圈匹配顏色）。抓住就是我在圓圈上寫圈子的功能 - 當我試圖隱藏特定的圈子時，這是一個問題。

我要繪製基於其命名圈子，但我不能確定如何將上述D3的功能限制到只有一個名字 - 目前它繪製每個行各界。

有沒有辦法使用d.name到繪圖限制每次一個名稱的方法嗎？

感謝

Answer 1

我覺得d3.nest是你想要什麼：

var names = d3.nest() 
    .key(function(d){ return d.name; }) 
    .entries(data); 

var data = [ 
 
     {"name":"1.0E-6MHz","value":"20.0","date":"2017-08-25 21:00:00"},{"name":"1.0E-6MHz","value":"93.8","date":"2017-08-25 22:00:00"},{"name":"1.0E-6MHz","value":"86.2","date":"2017-08-25 23:00:00"},{"name":"1.0E-6MHz","value":"79.2","date":"2017-08-26 00:00:00"},{"name":"1.0E-6MHz","value":"81.7","date":"2017-08-26 01:00:00"},{"name":"1.0E-6MHz","value":"76.2","date":"2017-08-26 02:00:00"},{"name":"1.0E-6MHz","value":"86.2","date":"2017-08-26 03:00:00"},{"name":"1.0E-6MHz","value":"89.2","date":"2017-08-26 04:00:00"},{"name":"1.0E-6MHz","value":"91.9","date":"2017-08-26 05:00:00"},{"name":"1.0E-6MHz","value":"78.2","date":"2017-08-26 06:00:00"},{"name":"1.0E-6MHz","value":"86.2","date":"2017-08-26 07:00:00"},{"name":"1.0E-6MHz","value":"82.2","date":"2017-08-26 08:00:00"},{"name":"1.0E-6MHz","value":"96.2","date":"2017-08-26 09:00:00"},{"name":"1.0E-6MHz","value":"88.7","date":"2017-08-26 10:00:00"},{"name":"1.0E-6MHz","value":"92.3","date":"2017-08-26 11:00:00"},{"name":"1.0E-6MHz","value":"80.2","date":"2017-08-26 12:00:00"},{"name":"1.0E-6MHz","value":"76.2","date":"2017-08-26 13:00:00"},{"name":"1.0E-6MHz","value":"93.2","date":"2017-08-26 14:00:00"},{"name":"1.0E-6MHz","value":"89.2","date":"2017-08-26 15:00:00"},{"name":"1.0E-6MHz","value":"79.2","date":"2017-08-26 16:00:00"},{"name":"1.0E-6MHz","value":"90.2","date":"2017-08-26 17:00:00"},{"name":"1.0E-6MHz","value":"85.2","date":"2017-08-26 18:00:00"},{"name":"1.0E-6MHz","value":"86.5","date":"2017-08-26 19:00:00"},{"name":"1.0E-6MHz","value":"76.2","date":"2017-08-26 20:00:00"},{"name":"1.0E-6MHz","value":"94.5","date":"2017-08-26 21:00:00"}, 
 
     {"name":"2.0E-6MHz","value":"26.2","date":"2017-08-25 21:00:00"},{"name":"2.0E-6MHz","value":"33.8","date":"2017-08-25 22:00:00"},{"name":"2.0E-6MHz","value":"26.2","date":"2017-08-25 23:00:00"},{"name":"2.0E-6MHz","value":"66.2","date":"2017-08-26 00:00:00"},{"name":"2.0E-6MHz","value":"3.7","date":"2017-08-26 01:00:00"},{"name":"2.0E-6MHz","value":"76.2","date":"2017-08-26 02:00:00"},{"name":"2.0E-6MHz","value":"36.2","date":"2017-08-26 03:00:00"},{"name":"2.0E-6MHz","value":"22.2","date":"2017-08-26 04:00:00"},{"name":"2.0E-6MHz","value":"31.6","date":"2017-08-26 05:00:00"},{"name":"2.0E-6MHz","value":"44.2","date":"2017-08-26 06:00:00"},{"name":"2.0E-6MHz","value":"7.2","date":"2017-08-26 07:00:00"},{"name":"2.0E-6MHz","value":"46.2","date":"2017-08-26 08:00:00"},{"name":"2.0E-6MHz","value":"46.2","date":"2017-08-26 09:00:00"},{"name":"2.0E-6MHz","value":"21.7","date":"2017-08-26 10:00:00"},{"name":"2.0E-6MHz","value":"22.3","date":"2017-08-26 11:00:00"},{"name":"2.0E-6MHz","value":"46.2","date":"2017-08-26 12:00:00"},{"name":"2.0E-6MHz","value":"46.2","date":"2017-08-26 13:00:00"},{"name":"2.0E-6MHz","value":"46.2","date":"2017-08-26 14:00:00"},{"name":"2.0E-6MHz","value":"46.2","date":"2017-08-26 15:00:00"},{"name":"2.0E-6MHz","value":"46.2","date":"2017-08-26 16:00:00"},{"name":"2.0E-6MHz","value":"96.2","date":"2017-08-26 17:00:00"},{"name":"2.0E-6MHz","value":"46.2","date":"2017-08-26 18:00:00"},{"name":"2.0E-6MHz","value":"33.5","date":"2017-08-26 19:00:00"},{"name":"2.0E-6MHz","value":"46.2","date":"2017-08-26 20:00:00"},{"name":"2.0E-6MHz","value":"44.5","date":"2017-08-26 21:00:00"}, 
 
     {"name":"3.0E-6MHz","value":"38.2","date":"2017-08-25 21:00:00"},{"name":"3.0E-6MHz","value":"43.8","date":"2017-08-25 22:00:00"},{"name":"3.0E-6MHz","value":"56.2","date":"2017-08-25 23:00:00"},{"name":"3.0E-6MHz","value":"46.2","date":"2017-08-26 00:00:00"},{"name":"3.0E-6MHz","value":"53.7","date":"2017-08-26 01:00:00"},{"name":"3.0E-6MHz","value":"3.2","date":"2017-08-26 02:00:00"},{"name":"3.0E-6MHz","value":"46.2","date":"2017-08-26 03:00:00"},{"name":"3.0E-6MHz","value":"66.2","date":"2017-08-26 04:00:00"},{"name":"3.0E-6MHz","value":"37.9","date":"2017-08-26 05:00:00"},{"name":"3.0E-6MHz","value":"42.2","date":"2017-08-26 06:00:00"},{"name":"3.0E-6MHz","value":"4.2","date":"2017-08-26 07:00:00"},{"name":"3.0E-6MHz","value":"46.2","date":"2017-08-26 08:00:00"},{"name":"3.0E-6MHz","value":"46.2","date":"2017-08-26 09:00:00"},{"name":"3.0E-6MHz","value":"21.7","date":"2017-08-26 10:00:00"},{"name":"3.0E-6MHz","value":"22.3","date":"2017-08-26 11:00:00"},{"name":"3.0E-6MHz","value":"46.2","date":"2017-08-26 12:00:00"},{"name":"3.0E-6MHz","value":"46.2","date":"2017-08-26 13:00:00"},{"name":"3.0E-6MHz","value":"46.2","date":"2017-08-26 14:00:00"},{"name":"3.0E-6MHz","value":"46.2","date":"2017-08-26 15:00:00"},{"name":"3.0E-6MHz","value":"46.2","date":"2017-08-26 16:00:00"},{"name":"3.0E-6MHz","value":"96.2","date":"2017-08-26 17:00:00"},{"name":"3.0E-6MHz","value":"46.2","date":"2017-08-26 18:00:00"},{"name":"3.0E-6MHz","value":"33.5","date":"2017-08-26 19:00:00"},{"name":"3.0E-6MHz","value":"46.2","date":"2017-08-26 20:00:00"},{"name":"3.0E-6MHz","value":"34.5","date":"2017-08-26 21:00:00"}, 
 
     {"name":"4.0E-6MHz","value":"46.2","date":"2017-08-25 21:00:00"},{"name":"4.0E-6MHz","value":"53.8","date":"2017-08-25 22:00:00"},{"name":"4.0E-6MHz","value":"86.2","date":"2017-08-25 23:00:00"},{"name":"4.0E-6MHz","value":"56.2","date":"2017-08-26 00:00:00"},{"name":"4.0E-6MHz","value":"23.7","date":"2017-08-26 01:00:00"},{"name":"4.0E-6MHz","value":"16.2","date":"2017-08-26 02:00:00"},{"name":"4.0E-6MHz","value":"76.2","date":"2017-08-26 03:00:00"},{"name":"4.0E-6MHz","value":"82.2","date":"2017-08-26 04:00:00"},{"name":"4.0E-6MHz","value":"39.9","date":"2017-08-26 05:00:00"},{"name":"4.0E-6MHz","value":"6.2","date":"2017-08-26 06:00:00"},{"name":"4.0E-6MHz","value":"22.2","date":"2017-08-26 07:00:00"},{"name":"4.0E-6MHz","value":"46.2","date":"2017-08-26 08:00:00"},{"name":"4.0E-6MHz","value":"46.2","date":"2017-08-26 09:00:00"},{"name":"4.0E-6MHz","value":"21.7","date":"2017-08-26 10:00:00"},{"name":"4.0E-6MHz","value":"22.3","date":"2017-08-26 11:00:00"},{"name":"4.0E-6MHz","value":"46.2","date":"2017-08-26 12:00:00"},{"name":"4.0E-6MHz","value":"46.2","date":"2017-08-26 13:00:00"},{"name":"4.0E-6MHz","value":"46.2","date":"2017-08-26 14:00:00"},{"name":"4.0E-6MHz","value":"46.2","date":"2017-08-26 15:00:00"},{"name":"4.0E-6MHz","value":"46.2","date":"2017-08-26 16:00:00"},{"name":"4.0E-6MHz","value":"96.2","date":"2017-08-26 17:00:00"},{"name":"4.0E-6MHz","value":"46.2","date":"2017-08-26 18:00:00"},{"name":"4.0E-6MHz","value":"33.5","date":"2017-08-26 19:00:00"},{"name":"4.0E-6MHz","value":"46.2","date":"2017-08-26 20:00:00"},{"name":"4.0E-6MHz","value":"24.5","date":"2017-08-26 21:00:00"}, 
 
     {"name":"5.0E-6MHz","value":"66.2","date":"2017-08-25 21:00:00"},{"name":"5.0E-6MHz","value":"63.8","date":"2017-08-25 22:00:00"},{"name":"5.0E-6MHz","value":"16.2","date":"2017-08-25 23:00:00"},{"name":"5.0E-6MHz","value":"86.2","date":"2017-08-26 00:00:00"},{"name":"5.0E-6MHz","value":"13.7","date":"2017-08-26 01:00:00"},{"name":"5.0E-6MHz","value":"36.2","date":"2017-08-26 02:00:00"},{"name":"5.0E-6MHz","value":"6.2","date":"2017-08-26 03:00:00"},{"name":"5.0E-6MHz","value":"21.2","date":"2017-08-26 04:00:00"},{"name":"5.0E-6MHz","value":"41.1","date":"2017-08-26 05:00:00"},{"name":"5.0E-6MHz","value":"86.2","date":"2017-08-26 06:00:00"},{"name":"5.0E-6MHz","value":"69.2","date":"2017-08-26 07:00:00"},{"name":"5.0E-6MHz","value":"46.2","date":"2017-08-26 08:00:00"},{"name":"5.0E-6MHz","value":"46.2","date":"2017-08-26 09:00:00"},{"name":"5.0E-6MHz","value":"21.7","date":"2017-08-26 10:00:00"},{"name":"5.0E-6MHz","value":"22.3","date":"2017-08-26 11:00:00"},{"name":"5.0E-6MHz","value":"46.2","date":"2017-08-26 12:00:00"},{"name":"5.0E-6MHz","value":"46.2","date":"2017-08-26 13:00:00"},{"name":"5.0E-6MHz","value":"46.2","date":"2017-08-26 14:00:00"},{"name":"5.0E-6MHz","value":"46.2","date":"2017-08-26 15:00:00"},{"name":"5.0E-6MHz","value":"46.2","date":"2017-08-26 16:00:00"},{"name":"5.0E-6MHz","value":"96.2","date":"2017-08-26 17:00:00"},{"name":"5.0E-6MHz","value":"46.2","date":"2017-08-26 18:00:00"},{"name":"5.0E-6MHz","value":"33.5","date":"2017-08-26 19:00:00"},{"name":"5.0E-6MHz","value":"46.2","date":"2017-08-26 20:00:00"},{"name":"5.0E-6MHz","value":"4.5","date":"2017-08-26 21:00:00"} 
 
    ]; 
 

 
// parsing 
 
data.forEach(function(d){ 
 
    d.value = +d.value; 
 
    d.date = new Date(d.date); 
 
}) 
 

 

 
// after this you will have 5 name keys of its values(in your case) 
 
var names = d3.nest() 
 
     .key(function(d){ return d.name; }) 
 
     .entries(data); 
 

 

 
// console.log(names) 
 

 
var chart = d3.select("#chart"); 
 
d3.select("#names") 
 
    .selectAll("button") 
 
    .data(names.map(function(d){ return d.key; })) 
 
    .enter() 
 
    .append("button") 
 
    .text(function(d){ return d; }) 
 
    .on("click", redraw); 
 

 
var svgWidth = 500, 
 
    svgHeight = 400, 
 
    radius = 5, 
 
    margin = { top: 30, right: 30, bottom: 30, left: 30 }, 
 
    width = svgWidth - margin.right - margin.left, 
 
    height = svgHeight - margin.top - margin.bottom; 
 

 
var xScale = d3.time.scale().range([0, width]), 
 
    yScale = d3.scale.linear().range([0, height]), 
 
    xAxis = d3.svg.axis().orient("bottom").scale(xScale), 
 
    yAxis = d3.svg.axis().orient("left"); 
 

 
var svg = chart.append("svg").attr({ width: svgWidth, height: svgHeight }); 
 
var gMain = svg.append("g").attr({ 
 
     class: "gMain", 
 
     transform: "translate(" + [margin.left, margin.top] + ")" 
 
    }), 
 
    gYAxis = gMain.append("g").attr("class", "axis yaxis"), 
 
    gXAxis = gMain.append("g").attr({ 
 
     class: "axis xaxis", 
 
     transform: "translate(0," + height + ")" 
 
    }) 
 
    gPlot = gMain.append("g").attr({ 
 
     class: "plot", 
 
     transform: "translate(0," + height + ")" 
 
    }); 
 

 

 
redraw("1.0E-6MHz", 0); 
 

 

 
function redraw(name, index){ 
 
    var points = names[index].values; 
 
    
 
    xScale.domain(d3.extent(points, function(d){ return d.date; })); 
 
    yScale.domain(d3.extent(points, function(d){ return d.value; })); 
 

 
    gXAxis.transition().call(xAxis); 
 
    gYAxis.transition().call(yAxis.scale(yScale.copy().range([height, 0]))); 
 
    
 
    var update = gPlot.selectAll("circle").data(points), 
 
     enter = update.enter() 
 
       .append("circle") 
 
       .attr({ 
 
        class: "circle", 
 
        r: radius, 
 
        fill: "steelblue", 
 
        cx: function(d){ return xScale(d.date); }, 
 
        cy: function(d){ return -yScale(d.value); } 
 
       }); 
 
    update.exit().remove(); 
 
    update.transition() 
 
     .duration(700) 
 
     .attr({ 
 
      cx: function(d){ return xScale(d.date); }, 
 
      cy: function(d){ return -yScale(d.value); } 
 
     }); 
 

 
}

.axis path{ 
 
    fill: none; 
 
    stroke: black; 
 
    stroke-width: 1; 
 
} 
 
.axis line{ 
 
    stroke: black; 
 
    stroke-width: 1; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 

 
<div id="names"></div> 
 
<div id="chart"></div>