동그라미에 ID를 추가하려고 시도했습니다.

저는 학교에서 교수를 연구 중이며 d3으로 코딩하고 있습니다. 도구 팁이있는 그래프를 만들고 있는데 범례를 클릭하여 그래프를 토글 할 수 있습니다. 그러나 줄을 전환 할 때 줄이 사라지지만 그 줄과 관련된 도구 설명을 가져올 수 없습니다. 어떻게 든이 서클에 ID를 추가해야한다는 것을 알고 있지만 어떻게 될지 모르겠습니다. 지금까지 가지고있는 것을 보여주기 위해 아래 코드를 포함 시켰습니다. 어떤 도움을 주시면 감사하겠습니다!동그라미에 ID를 추가하려고 시도했습니다.

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> /* set the CSS */ 

body { font: 12px Arial;} 

path { 
stroke: white; 
stroke-width: 2; 
fill: none; 
} 

.axis path, 
.axis line { 
fill: none; 
stroke: grey; 
stroke-width: 1; 
shape-rendering: crispEdges; 
} 

div.tooltip { 
position: absolute;   
text-align: center;   
width: 170px;     
height: 500px;     
padding: 1px;    
font: 12px sans-serif;  
background: lightsteelblue; 
border: 0px;   
border-radius: 5px;   
pointer-events: none;   
} 
.legend { 
font-size: 16px; 
font-weight: bold; 
text-anchor: middle; 
} 

</style> 
<body> 

<!-- load the d3.js library -->  
<script src="https://d3js.org/d3.v4.min.js"></script> 

<script> 

// Set the dimensions of the canvas/graph 
var margin = {top: 20, right: 150, bottom: 60, left: 80}, 
    width = 1160 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

// Parse the date/time 


// Set the ranges 
var x = d3.scaleTime().range([0, width-100]); 
var formatxAxis=d3.format('.0f'); 
var y = d3.scaleLinear().range([height, 0]); 

// Define the axe 
var xAxis = d3.axisBottom().scale(x) 
.tickFormat(formatxAxis).ticks(20); 

var yAxis = d3.axisLeft().scale(y) 
.ticks(5); 

// Define the line 
var valueline = d3.line() 
.curve(d3.curveMonotoneX) 
.x(function(d) { return x(d.year); }) 
.y(function(d) { return y(d.count); }); 


// Define the div for the tooltip 
var div = d3.select("body").append("div") 
.attr("class", "tooltip")    
.style("opacity", 0); 

// Adds the svg canvas 
var svg = d3.select("body") 
.append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
.append("g") 
    .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

// Get the data 
d3.json("satisfaction.json", function(error, data) { 
data.forEach(function(d) { 
    d.year = +d.year; 
    d.count = +d.count; 
    }); 
// Scale the range of the data 
    x.domain(d3.extent(data, function(d) { return d.year; })); 
y.domain([0, d3.max(data, function(d) { return d.count; })]); 

//nest the entries by symbol 
var dataNest = d3.nest() 
.key(function(d) { 
    return d.word; 
}) 
.entries(data); 



//define colors for the lines 
var color = d3.scaleOrdinal(d3.schemeCategory10); 

// spacing for the legend 
legendSpace = width/dataNest.length; 

var circleid = svg.selectAll("circle") 
    .data(dataNest) 
    .enter() 
    .append("g") 
    .attr("id", function(d){ 
    return "circle" + d.key.replace(/\s+/g, ''); 
    }); 

    // Loop through each symbol/key 
    dataNest.forEach(function(d,i) { 

    svg.append("path") 
     .attr("class", "line") 
     .style("stroke", function() { // Add the colours dynamically 
      return d.color = color(d.key); }) 
     .attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID 
     .attr("d", valueline(d.values)); 


    // Add the Legend 
    svg.append("text") 
     .attr("x", width - margin.left + 50) 
     .attr("y", legendSpace/4 + i*(legendSpace/6)) 
     .attr("class", "legend") // style the legend 
     .style("fill", function() { // Add the colours dynamically 
      return d.color = color(d.key); }) 
     .on("click", function(){ 
      // Determine if current line is visible 
      var active = d.active ? false : true, 
      newOpacity = active ? 0 : 1; 
      // Hide or show the elements based on the ID 
      d3.select("#tag"+d.key.replace(/\s+/g, '')) 
       .transition().duration(100) 
       .style("opacity", newOpacity); 
      // Update whether or not the elements are active 
      d.active = active; 
       // Hide or show the elements based on the ID 
      d3.select("circle" + d.key.replace(/\s+/g, '')) 
       .transition().duration(100) 
       .style("opacity", newOpacity); 
      })    
     .text(d.key); 

    }); 


    // Add the scatterplot 
    svg.selectAll("dot")  
    .data(data)   
    .enter().append("circle") 
    .attr("r", 5)  
    .attr("cx", function(d) { return x(d.year); })  
    .attr("cy", function(d) { return y(d.count); })  
    .on("click", function(d) {  
     div.transition()   
      .duration(200)  
      .style("opacity", .9);  
     div .html(d.word + "<br/>" + d.count + "<br/>" + d.songs) 
      .style("left", (d3.event.pageX) + "px")  
      .style("top", (d3.event.pageY - 25) + "px");  
     })     
     .on("dblclick", function(d) {  
     div.transition()   
      .duration(500)  
      .style("opacity", 0); 
     }) 
; 
    // Add the X Axis 
    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(xAxis); 

    // Add the Y Axis 
    svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis); 

    }); 

    </script> 
    </body>

출처

2017-03-27 Daniel Chemey

지금 그래프에 원을 추가하기 전에 id을 설정하려고합니다. 대신 그래프에 동그라미를 추가 할 때 id을 설정할 수 있습니다.

// Add the scatterplot 
    svg.selectAll("dot")  
    .data(data)   
    .enter().append("circle") 
    .attr("id", function(d){ return "circle" + d.key.replace(/\s+/g, ''); })   
    // ^---- add the id here when you're appending the circles 
    .attr("r", 5)  
    .attr("cx", function(d) { return x(d.year); })  
    .attr("cy", function(d) { return y(d.count); })  
    .on("click", function(d) {  
     div.transition()   
      .duration(200)  
      .style("opacity", .9);  
     div .html(d.word + "<br/>" + d.count + "<br/>" + d.songs) 
      .style("left", (d3.event.pageX) + "px")  
      .style("top", (d3.event.pageY - 25) + "px");  
     })     
     .on("dblclick", function(d) {  
     div.transition()   
      .duration(500)  
      .style("opacity", 0); 
     }) 
;

출처

2017-03-28 00:08:33 sparta93

안녕하세요! 그래서 당신의 충고를했지만 내 코드는 여전히 어떤 이유로 작동하지 않습니다. 그 밖의 무엇이 문제인지 아십니까? –

동그라미에 ID를 추가하려고 시도했습니다.

답변

관련 문제