d3에서 클릭시 CSV 파일을 변경할 때 영역 차트의 텍스트를 업데이트하는 방법은 무엇입니까?

D3 초보자입니다. clickon로 csv 파일을 변경하면 갱신되는 에리어 차트를 작성했습니다. 문제는 단지 텍스트 일뿐입니다. 새 텍스트를 올 때 이전 텍스트는 삭제되지 않습니다.d3에서 클릭시 CSV 파일을 변경할 때 영역 차트의 텍스트를 업데이트하는 방법은 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" > 
<title>Otroška imena</title> 
<script src="D3/d3.js"></script> 
<script src="D3/d3.layout.cloud.js"></script> 

<!-- Style --> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 

</head> 
<body> 
<div id="option"> 
    <input type="button"value="Adam"onclick="zamenjaj(value)" /> 
    <input type="button"value="Aljaž"onclick="zamenjaj(value)" /> 
    <input type="button"value="Sara"onclick="zamenjaj(value)" /> 
</div> 

<!-- JavaScript --> 
<script> 
window.funkcija1 = function(x){zamenjaj(x.value);} 

//Dimensions of canvas 
    var margin = {top: 20, right: 30, bottom: 30, left: 40}, 
width = 700 - margin.left - margin.right, 
height = 400 - margin.top - margin.bottom; 

// Set the ranges 
var x = d3.scale.linear().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

// Define the axes 
var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.format("d")); 
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5); 

//Area 
var area = d3.svg.area() 
    .interpolate("monotone") 
    .x(function(d) { return x(d.leto); }) 
    .y0(height) 
    .y1(function(d) { return y(d.st); }); 

// Line 
var valueline = d3.svg.line() 
.interpolate("monotone") 
.x(function(d) { return x(d.leto); }) 
.y(function(d) { return y(d.st); }); 


//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 + ")"); 

// y grid lines 
function make_y_axis() {return d3.svg.axis().scale(y).orient("left").ticks(5)}  

//**DATA** 
d3.csv("Imena/Adam.csv",function(error, podatki) { 
podatki.forEach(function(d) {d.st = +d.st; }); 

// Compute the minimum and maximum 
x.domain(d3.extent(podatki,function(d) { return d.leto; })); 
y.domain([0, d3.max(podatki, function(d) { return d.st; })]); 

// Add the filled area 
svg.append("path") 
    .attr("class", "area") 
    .attr("d", area(podatki)); 

// Add the valueline path. 
svg.append("path")  // Add the valueline path. 
    .attr("class", "line") 
    .attr("d", valueline(podatki)); 

// Draw the Y Grid lines 
svg.append("g")   
    .attr("class", "grid") 
    .call(make_y_axis().tickSize(-width, 0, 0).tickFormat("")) 

// 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) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("Stevilo"); 

    podatki.splice(1,20); 

    var napis = svg.selectAll().data(podatki).enter().append("text") 
    napis 
     .text(function(d){return d["ime"]}) 
     .attr("class","graftext") 
     .attr("y",50).attr("x",50); 
}); 

// ** Update podatki section (Called from the onclick) 
function zamenjaj(ime_s) { 

    // Get the podatki again 
    d3.csv("Imena/" + ime_s + ".csv",function(error, podatki) { 
    podatki.forEach(function(d) { 
     d.st = +d.st;}); 

    // Select the section we want to apply our changes to 
    var svgUpdate = d3.select("body").transition(); 

    // Scale the range of the data again 
    y.domain([0, d3.max(podatki, function(d) { return d.st; })]); 

    // Make the changes 
    svgUpdate.select(".area") 
     .duration(750) 
     .attr("d", area(podatki)); 
    svgUpdate.select(".line") // change the line 
     .duration(750) 
     .attr("d", valueline(podatki)); 
    svgUpdate.select(".y.axis") // change the y axis 
     .duration(750) 
     .call(yAxis); 

    podatki.splice(1,20); 

    var napisUpdate = svg.selectAll(".text").data(podatki); 
    napisUpdate.exit().remove(); 
    napisUpdate.enter().append("text") 
     .text(function(d){return d["ime"]}) 
     .attr("class","graftext") 
     .attr("y",80).attr("x",50).duration(750); 
    }); 
} 
</script> 
</body> 
</html>

이 페이지는 나에게 도움이 : 여기

는 업데이트 기능을 가진 코드 this 및 this하지만 불행히도 그것은 나를 위해 작동하지 않습니다. 도와 줘서 고마워.

출처

2014-07-17 mateja

보인다. 문제를 보여주는 완전한 예제를 제공해 주시겠습니까? –

왜 텍스트를 업데이트하기 전에 데이터에서 20 개의 항목을 연결하고 있습니까? – jshanley

Lars, 나머지 코드를 추가했습니다. – mateja

.text 클래스를 사용하여 텍스트 요소를 선택하지만 .enter() 선택에서 텍스트 요소를 만들 때 .graftext 클래스를 제공하고 있습니다. 선택하는 데 사용한 것과 같은 새 클래스에 대해 동일한 클래스를 사용해야합니다. 그렇지 않으면 데이터 조인을 계산할 때 선택 영역이 비어 있기 때문에 새로운 요소가 모두 필요하다고 생각할 것입니다.

은 다음과 같이 그것을 시도 :

// selects all elements with class of `graftext` and joins the data 
var napisUpdate = svg.selectAll(".graftext").data(podatki); 
    // remove excess elements for which there is no data 
    napisUpdate.exit().remove(); 
    // create new elements for each excess datapoint 
    napisUpdate.enter().append("text") 
    .attr("class","graftext") 
    .attr("y",80).attr("x",50).duration(750); 
    }); 
    // update existing elements with the new information 
    napisUpdate.text(function(d){return d["ime"]});

출처

2014-07-17 20:38:17 jshanley

감사하지만 작동하지 않습니다. 새 텍스트는 표시되지 않고 이전 텍스트는 아직 여기에 있습니다. – mateja

또한 불필요한'.duration()'호출을 제거하십시오. '.transition()'을 바로 앞에 쓰지 않고'.duration'을 호출하는 것은 의미가 없으며 아마도 undefined를 호출하기 위해 모든 종류의 에러를 던질 것입니다. – jshanley

문제가 해결되었습니다. 당신의 대답도 유용했습니다. 감사! 유용한 솔루션에 대한 요점을 알려 드리고 싶지만 아직 충분한 평판을 얻지 못했습니다. – mateja

몇 시간 후에 나는 문제를 해결. 나는 몇 가지를 변경하고 그것을 작동 :

svg.append('text') 
    .data(podatki) 
    .attr('x', 30) 
    .attr('y', 50) 
    .attr("class","graftext") 
    .text(function(d) { return d.ime })

및 업데이트 기능에 : 그것은 작동해야처럼

podatki.splice(1,20); 
var svgUpdate = d3.select(".graftext").data(podatki); 
svgUpdate.exit().remove(); 
svgUpdate.enter().append("text"); 
svgUpdate.text(function(d) { return d.ime });

출처

2014-07-19 17:26:12 mateja

d3에서 클릭시 CSV 파일을 변경할 때 영역 차트의 텍스트를 업데이트하는 방법은 무엇입니까?

답변

관련 문제