CODEWITHSUNDEEP
d3.js
alexc101
alexc101

Reputation: 177

Changing data on click event with d3

I found this example for a Pie Chart and I was hoping to modify it (easily) to update when a list item text() was updated within, sadly I have greatly misunderstood the mechanics at work and would like some help figuring out why it isn't behaving how I would like.

Here is a plnk + code;

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));
  };
}

I think the issue could be I'm not referencing the value correctly?

Any advice is much appreciated,

Cheers

Plunk

Upvotes: 1

Views: 1032

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10612

You're onclick function should be something like this :

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

  })

This gets the innerHTML ie the text value of the link pressed and passes it to the change function (which i have added). Also, put to lower case as it checks if the string is oranges not Oranges.

Updated plnkr : http://plnkr.co/edit/d7qJjBaihVALSdkzPtYi?p=preview

A bit more explanation.

You were trying to get the value of a text element whereas the example youre following was getting it from a check box. You can't get value from text you need to get innerHTML or textContent etc

Upvotes: 2

Related Questions