クリックイベントのデータをd3で変更する

Question

円グラフにはexampleが見つかりました。リスト項目text（）が更新されたときに更新するように修正したいと思っていました。悲しいことに、私は仕事の仕組みを大きく誤解しています。なぜ私がどのように行動していないのかを理解する助けをしたいと思います。

ここにはplnk +コードがあります。

HTML：

<li><a href="#" id="data">Apples</a> 
       <ul id="dataset"> 
      <li> 
      <a href="#" name="d" value="apples">Apples</a> 
      </li> 
      <li> 
      <a href="#" name="d" value="oranges">Oranges</a> 
      </li> 
     </ul> 
     </li> 
    </ul> 

Javascriptを：

var width = 960, 
    height = 500, 
    radius = Math.min(width, height)/2; 

var color = d3.scale.category20(); 

var pie = d3.layout.pie() 
    .value(function(d) { 
    return d.apples; 
    }) 
    .sort(null); 

var arc = d3.svg.arc() 
    .innerRadius(radius - 100) 
    .outerRadius(radius - 20); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

d3.tsv("data.tsv", type, function(error, data) { 

    $("a").on('click', function() { 
    $("#data").html($(this).text()) 
    }).on('click', function() { 
    if ($("#data").text() == "Oranges") { 
     change() 
    } 
    }) 

    if (error) throw error; 
    console.log(data) 
    var path = svg.datum(data).selectAll("path") 
    .data(pie) 
    .enter().append("path") 
    .attr("fill", function(d, i) { 
     return color(i); 
    }) 
    .attr("d", arc) 
    .each(function(d) { 
     this._current = d; 
    }); // store the initial angles 


    function change() { 
    var value = this.value; 
    console.log(value) 
    pie.value(function(d) { 
     return d[value]; 
    }); // change the value function 
    path = path.data(pie); // compute the new angles 
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
    } 
}); 

function type(d) { 
    d.apples = +d.apples; 
    d.oranges = +d.oranges; 
    return d; 
} 

// Store the displayed angles in _current. 
// Then, interpolate from _current to the new angles. 
// During the transition, _current is updated in-place by d3.interpolate. 
function arcTween(a) { 
    var i = d3.interpolate(this._current, a); 
    this._current = i(0); 
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

私は、問題は私が値を正しく参照していないよできることと思いますか？何かアドバイスがはるかに高く評価されて

、

乾杯

Plunk

Answer 1

あなたはonclickの関数は次のようなものであるべきだ：これはテキスト値、すなわち、innerHTMLプロパティを取得します

$("a").on('click', function() { 
    console.dir(this.innerHTML) 
     $("#data").html(this.innerHTML) 
     change(this.innerHTML.toLowerCase()) 

    }) 

リンクが押され、それをchange関数に渡します（これは私が追加したものです）。また、オレンジがオレンジでないかどうかを調べるときに小文字にします。

更新plnkr：http://plnkr.co/edit/d7qJjBaihVALSdkzPtYi?p=preview

もう少し説明。

テキスト要素のvalueを取得しようとしましたが、次の例ではチェックボックスから取得していました。 innerHTMLやtextContentなどを取得する必要があるテキストから価値を得ることはできません