1

我是 D3 和 JavaScript 的新手。我正在开发一个 HTML5 应用程序，用户单击一个链接，然后将链接值（自定义属性）作为参数传递给 d3 data() 方法。我有大约 60 个不同的链接/值以及相应的 JSON 数组。我想根据引用链接的值将正确的集合加载到我正在工作的 d3 中。

我知道如何使用 switch 语句来比较链接值，然后根据相等测试传递一个变量，但这对于 60 多个值可能非常麻烦。我确信有更好的方法来做到这一点。这是我的代码。我也没有在控制台上收到任何错误。我是否需要以某种方式将链接值转换为不同的数据类型？

这是HTML：

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

这是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");

   });   
})

提前致谢！我真的很感激任何帮助。

马特

4

1 回答 1

1

如果我正确理解您的问题，您正尝试使用这 60 个不同的链接来允许用户选择您的数据子集。您的链接具有与输入 json 中的键对应的值的属性。那正确吗？如果是这样，这就是你应该做的。首先，将您的 HTML 链接更改为只包含没有任何虚线路径的键，如下所示：

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

然后更改您的 javascript 以使用该密钥，如下所示：

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

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

如果这不是您所要求的，您能否提供更多链接示例并显示您的 json 数据的样子？

于 2013-08-31T02:23:37.753 回答