Wie auf Svg in einer anderen Funktion definiert zugreifen?

Question

Ich versuche einen Punkt in einem d3 Liniendiagramm zu markieren. Dies muss in einem Funktionsaufruf erfolgen, nachdem das Liniendiagramm erstellt und in einer anderen Funktion gezeichnet wurde.

Das Zeichnen des Liniendiagramms (und das Erstellen des Svg-Objekts) erfolgt in einer update_graph-Funktion. Ich versuche herauszufinden, wie Sie am besten auf das Svg-Objekt zugreifen können, das im Funktionsaufruf highlight_point verwendet werden soll.

Ich habe eine jsfiddle hier erstellt: https://jsfiddle.net/pxc0gpc6/4/ Wenn der Code in update_graph nicht in einem Funktionsaufruf eingeschlossen ist, funktioniert der highlight_point-Code wie erwartet. Aber wenn ich den Code innerhalb der Funktion update_graph habe, weiß ich nicht mehr, wie ich auf das Svg-Objekt zugreifen soll.

Ich habe versucht, der Svg eine ID zu geben, so dass ich wieder darauf zugreifen kann, aber der markierte Punkt wird nicht am Liniendiagrammbereich gezeichnet. Ich habe auch versucht die svg global zugänglich zu machen, indem eine this.svg Variable am Ende der update_graph Funktion zu schaffen, aber das funktioniert auch nicht:

this.svg = svg; 

Answer 1

Problem 1:

Wie um die SVG-Instanz in update_graph Funktion zu bekommen.

Machen Sie eine ID und weisen Sie es wie folgt auf die Gruppe:

var svg = d3.select("body").append("svg") 

    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("id", "myGroup")//assign id to group 

In Ihrer Funktion Zugriffsgruppe wie folgt aus:

function highlight_point() { 
    var svg = d3.select("#myGroup") 

Problem 2:

Wie zugreifen die Liniendaten, um Kreise für den Punkt in update_graph Funktion zu machen.

var data = d3.selectAll(".line").data();//get the line data 
    data.forEach(function(d) {//for each line 
    d.values.forEach(function(v) { //get each line's data points 
     //iterate over the points 
     var focus_red = svg.append("g") 
     .attr("class", "focus") 
     .style("stroke", "#ff0000") 
     .style("display", null); 

     focus_red.append("circle") 
     .style("fill", "#ff0000") 
     .style("stroke", "#ff0000") 
     .attr("r", 4.5); 
     //the x of the center defined by date 
     //the y of the center defined by temperature 
     focus_red.attr("transform", "translate(" + x(v.date) + "," + y(v.temperature) + ")"); 

    }); 

Code arbeitet here

EDIT

Highlight zweiten Punkt.

Filter verwenden wie folgt aus:

data.forEach(function(d) { 
    d.values.filter(function(k, i) { 
     return i == 2; //select the second data form each line. 
    }).forEach(function(v) { 
     //make circle 

Arbeits Code here