根據d3js中的數據ID在散點圖中選擇點

Question

我最初根據從d3js中的服務器獲取的數據填充了散點圖。 現在，我打算根據數據ID突出顯示點。

樣本數據集：

gdata = [{'pid': 161, 'cu': 4, 'ft': 2.8, 'car': 57.1},
        {'pid': 161, 'cu': 4, 'ft': 2.8, 'car': 57.1}
         ]

  func init() {
           // Some code 
         svg.selectAll(".dot")
            .data(gdata)
            .enter().append("svg:circle")
            .attr("class", "dot")
            .attr("r", 5.5)
            .attr("stroke", "")
            .attr("cx", function(d) { return x(d.fats); })
            .attr("cy", function(d) { return y(d.carbs); })
            .style("fill", function(d) { 
                if (d.pid == $('#package_id').val()) {
                       return "red" ;
                }
                return "#1f77b4" ; /*(d.cuisine == 6 ? "#cfcfcf" : color(d.cuisine));*/ 
            });
       }

我正在嘗試創建另一個功能

//psuedocode
function highlight(subset) {
      subset =  {'pid': 161, 'cu': 4, 'ft': 2.8, 'car': 57.1} ;
      select that particular dot in scatter plot which represents that data point
      and style("fill", "red")
}

Answer 1

由於假定突出顯示的點已經由init()繪制過，因此您無需進行任何數據綁定。 相反，您需要選擇點並根據其d以及它是否出現在subset調整其填充：

function highlight(subset) {
  svg.selectAll('.dot').style("fill", function(d) {
    var dIsInSubset = d.pid == subset.pid;
    return dIsInSubset ? 'red' : '#1f77b4'
  })
}