How to use a link attr value as a variable to load json within d3.json() method?

Question

I am new to D3 and JavaScript. I am working on an HTML5 app whereby a user clicks a link and the link value--a custom attribute--is then passed as a parameter to the d3 data() method. I have about 60 different links/values with corresponding JSON arrays. I want to load the correct set, based on the value of the referring link, into a d3 viz I am working.

I know how to do this with a switch statement to compare the link value and then pass a variable based on an equality test, but that could be pretty cumbersome for 60+ values. I'm sure there's a better way to do this. Here's my code. I'm not getting any errors on the console either. Do I need to somehow convert the link value to a different data type?

Here's the HTML:

 <ul class="list">
                    <li>
                        <a href="#alkane">Alkane</a>
                    </li>
                    <li>
                        <a linkValue="json.Alkene" class="animate" href="#alkene">Alkene</a>
                    </li>

Here's the JS

  $('a.animate').on('click', function() {


  var linkVal = $(this).attr('linkValue');

  var w = 200;
  var h = 300;
  var padding = 1;

  var xScale = d3.scale.linear()
.domain([0, 20])
.range([padding, w - padding * 2]);

  var yScale = d3.scale.linear()
     .domain([0, 15])
     .range([0, h]);


   var yAxis = d3.svg.axis()
      .scale(yScale)
  .orient("left")
      .ticks(15);

 var svg = d3.select("container")
.append("svg")
.attr("width", w)
.attr("height", h);

 d3.json("test.json", function(json) {

    svg.selectAll("rect")


      .data(linkVal)
      .enter()
      .append("rect")
      .attr("y", function(d){
               return d.ypos;
               })
           .attr("width", 100)
           .attr("height", function(d){
               return d.height;
               })
           .style("fill",function(d){
               return d.color;
               })
             .transition()
             .delay(500)
             .duration(1000)
             .attr("x",180)
             .ease("elastic")
             .transition()
             .delay(500)
             .duration(1000)
             .attr("x",1)
             .ease("elastic");

        svg.selectAll("text")
           .data(linkVal)
           .enter()
           .append("text")
           .text(function(d){
               return d.textRange;
           })
           .attr("x", 110)
           .attr("y", function(d){
               return d.ypos +10;
           })
           .attr("font-family", "sans-serif")
           .attr("font-size", "12px")
           .attr("font-weight", "bold")
           .attr("fill", "black")
           .transition()
           .delay(500)
           .duration(1000)
           .attr("x",280)
           .ease("elastic")
           .transition()
           .delay(500)
           .duration(1000)
           .attr("x",105)
           .ease("elastic");

         svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + padding + ",0)")
            .call(yAxis);

        svg.selectAll("axis");

   });   
})

Thanks in advance! I really appreciate any help.

Matt

Answer 1

If I understand your question correctly, you're trying to use these 60 different links to allow the user to select subsets of your data. Your links have attributes with values that correspond to keys in your input json. Is that right? If so, here's what you should do. First, change your HTML links to just have the key without any dotted paths, like so:

<a linkValue="Alkene" class="animate" href="#alkene">Alkene</a>

and then change your javascript to use that key like so:

d3.json("test.json", function(json) {
    svg.selectAll("rect")
        .data(json[linkVal])
        .enter()
        .append("rect")
    ...

    svg.selectAll("text")
       .data(json[linkVal])
       .enter()
       .append("text")
    ...

If this isn't what you're asking for, could you provide more examples of your links and show what your json data looks like?