个人中心
gpt4 book ai didi

jquery - 如何使用 d3.js 在线图中的线条上获得标签

转载 作者：行者123 更新时间：2023-12-01 04:11:12 25 4
gpt4 key购买 nike 

<!DOCTYPE html>
<meta charset="utf-8">
  <head>
    <title>Simple Line Graph using SVG and d3.js</title>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <style>
      /* tell the SVG path to be a thin blue line without any area fill */
      svg {
        border: 1px solid red;
      }

      .text-anchor{
      font-size: 15px;
      }

      path {
        stroke: steelblue;
        stroke-width: 1;
        fill: none;
      }

      .axis {
        shape-rendering: crispEdges;
      }

      .x.axis line {
        stroke: lightgrey;
      }

      .x.axis .minor {
        stroke-opacity: .5;
      }

      .x.axis path {
        display: none;
      }

      .y.axis line, .y.axis path {
        fill: none;
        stroke: #000;
      }
    </style>
  </head>
  <body>


  <div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>


  <script>
    /* implementation heavily influenced by http://bl.ocks.org/1166403 */

    //var json=[{"created_at":1385481173,"ranking":[["#OBAMA",88],["#TCOT",82]]},{"created_at":1385481233,"ranking":[["#OBAMA",86],["#TCOT",62]]},{"created_at":1385481293,"ranking":[["#OBAMA",82],["#TCOT",42]]},{"created_at":1385481353,"ranking":[["#OBAMA",67],["#TCOT",62]]},{"created_at":1385481413,"ranking":[["#OBAMA",88],["#TCOT",22]]}];

   var json = ["{\"created_at\":1385481755,\"rankings\":[[\"#OBAMA\",91],[\"#TCOT\",65],[\"#OBAMACARE\",26],[\"#IRAN\",25],[\"#MTVSTARS\",20],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#LNYHBT\",12],[\"#PJNET\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481749,\"rankings\":[[\"#OBAMA\",90],[\"#TCOT\",64],[\"#OBAMACARE\",26],[\"#IRAN\",25],[\"#MTVSTARS\",19],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#LNYHBT\",12],[\"#PJNET\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481743,\"rankings\":[[\"#OBAMA\",90],[\"#TCOT\",64],[\"#OBAMACARE\",26],[\"#IRAN\",25],[\"#MTVSTARS\",18],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#LNYHBT\",12],[\"#PJNET\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481737,\"rankings\":[[\"#OBAMA\",93],[\"#TCOT\",63],[\"#OBAMACARE\",28],[\"#IRAN\",27],[\"#MTVSTARS\",18],[\"#BENGHAZI\",17],[\"#TEAPARTY\",16],[\"#PJNET\",12],[\"#POPCORN\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481731,\"rankings\":[[\"#OBAMA\",91],[\"#TCOT\",64],[\"#OBAMACARE\",29],[\"#IRAN\",27],[\"#MTVSTARS\",17],[\"#BENGHAZI\",17],[\"#TEAPARTY\",15],[\"#POPCORN\",11],[\"#CARAMEL\",11],[\"#IMMIGRATION\",11]]}","{\"created_at\":1385481725,\"rankings\":[[\"#OBAMA\",61],[\"#TCOT\",63],[\"#OBAMACARE\",28],[\"#IRAN\",26],[\"#MTVSTARS\",17],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",11],[\"#CARAMEL\",11],[\"#POPCORN\",11]]}","{\"created_at\":1385481719,\"rankings\":[[\"#OBAMA\",93],[\"#TCOT\",64],[\"#OBAMACARE\",28],[\"#IRAN\",26],[\"#MTVSTARS\",18],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",12],[\"#CARAMEL\",11],[\"#POPCORN\",11]]}","{\"created_at\":1385481713,\"rankings\":[[\"#OBAMA\",93],[\"#TCOT\",33],[\"#OBAMACARE\",28],[\"#IRAN\",26],[\"#MTVSTARS\",18],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",12],[\"#POPCORN\",11],[\"#CARAMEL\",11]]}","{\"created_at\":1385481707,\"rankings\":[[\"#OBAMA\",94],[\"#TCOT\",66],[\"#IRAN\",28],[\"#OBAMACARE\",28],[\"#MTVSTARS\",18],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#IMMIGRATION\",12],[\"#CARAMEL\",11],[\"#PJNET\",11]]}","{\"created_at\":1385481701,\"rankings\":[[\"#OBAMA\",94],[\"#TCOT\",66],[\"#IRAN\",28],[\"#OBAMACARE\",28],[\"#MTVSTARS\",16],[\"#BENGHAZI\",16],[\"#TEAPARTY\",13],[\"#PJNET\",12]]}"];

    // var temp_json;
    // $.ajax({
    //     type: 'GET',
    //     url: "http://localhost:4567/past_rankings.json", // JQuery loads serverside.php
    //     dataType: 'json',
    //     //data: json,
    //     async: false,
    //     success: function(json) { temp_json = json;}

    // });


    //comment this line if you want to use local data
    //json = temp_json ;

    //parse json
    $.each(json,function(index,value){
      json[index]= JSON.parse(value);
      // convert epoch time to js epoch time (milliseconds)
      json[index].created_at = json[index].created_at * 1000 ;
    });

    // define dimensions of graph
    var m = [80, 80, 80, 80]; // margins
    var w = 1200 - m[1] - m[3]; // width
    var h = 600 - m[0] - m[2]; // height
    var format = d3.time.format("%Y-%m-%d %H:%M:%S");

    //specify ranges and domains
    var color = d3.scale.category10();

    var x = d3.time.scale().domain( d3.extent(json,function (d){return d.created_at}) ).range([0, w]);

    var y = d3.scale.linear().domain([0, d3.max(json, function (d) {
            return Math.max(d.rankings[0][1],d.rankings[1][1]);
      })]).range([h, 0]);



    var line = d3.svg.line()
      // assign the X function to plot our line as we wish
      .x(function(d,i) { 
        //console.log(d);
        //console.log('Plotting X value for data point to be at: ' + d.created_at + ' using our xScale.');
        return x(d.created_at); 
      })
      .y(function(d) { 
        //console.log('Plotting Y value for data point to be at:' + d.rankings[0][1] + " using our yScale.");
        return y(d.rankings[0][1]); 
    })

    var line2 = d3.svg.line()
      // assign the X function to plot our line as we wish
      .x(function(d,i) { 
      //console.log(d);
        //console.log('Plotting X value for data point to be at: ' + d.created_at + ' using our xScale.');
        return x(d.created_at); 
      })
      .y(function(d) { 
        //console.log('Plotting Y value for data point to be at:' + d.rankings[0][1] + " using our yScale.");
        return y(d.rankings[1][1]); 
    })

    var line3 = d3.svg.line()
      // assign the X function to plot our line as we wish
      .x(function(d,i) { 
      //console.log(d);
        //console.log('Plotting X value for data point to be at: ' + d.created_at + ' using our xScale.');
        return x(d.created_at); 
      })
      .y(function(d) { 
        //console.log('Plotting Y value for data point to be at:' + d.rankings[0][1] + " using our yScale.");
        return y(d.rankings[2][1]); 
    })


    // Add an SVG element with the desired dimensions and margin.
    var graph = d3.select("#graph").append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2])
      .append("svg:g")
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

    // create yAxis
    // var xAxis = d3.svg.axis().scale(x);//.ticks(-h).orient("bottom");//tickSize(-h).tickSubdivide(true);
    var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickFormat(d3.time.format("%Y-%m-%d %H:%M:%S"));

    //collect all the rankings
    color.domain(d3.keys(json[0]).filter(function(key) { return key !== "date"; }));


    // Add the x-axis.
    graph.append("svg:g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
            .call(xAxis)
        .selectAll("text")  
      .attr("class","text-anchor")
      .attr("dx", "-2.48em")
      .attr("dy", ".15em")
      .attr("transform", function(d) {
        return "rotate(-65)" 
      });

      // create left yAxis
      var yAxisLeft = d3.svg.axis().scale(y).ticks(9).orient("left");
      // Add the y-axis to the left
      graph.append("svg:g")
      .attr("class", "y axis")
      .call(yAxisLeft);

      // Add the line by appending an svg:path element with the data line we created above
      // do this AFTER the axes above so that the line is above the tick-lines
      graph.append("svg:path").attr("d", line(json))
        .append("svg:g")
        .append("text")
        .attr("x", 10)
        .attr("y",10)
        .text("text");
      graph.append("svg:path").attr("d", line2(json)).style("stroke", "green");
      graph.append("svg:path").attr("d", line3(json)).style("stroke", "red");

  </script>



  </body>
</html>

我正在尝试以与 here 相同的方式在每行末尾获取标签，但它似乎不起作用，我有这些部分应该绘制文本，但它不起作用: 

graph.append("svg:path").attr("d", line(json))
 .append("svg:g")
 .append("text")
 .attr("x", 10)
 .attr("y",10)
 .text("text");

最佳答案

看看this Gist (demo code)它显示了使用 svg:textPath 来标记路径。该示例显示了一条通用的弯曲路径，但它应该同样轻松地应用于您的线条元素。

关于jquery - 如何使用 d3.js 在线图中的线条上获得标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20340332/

25 4 0
文章推荐： jquery 创建数组，其中包含天数和 OT 的总和，后跟项目编号
文章推荐： scala - 干扰 Scala 动态特征的方法解析的字段？
文章推荐： asp-classic - 从 fso 对象创建 ado 记录集
文章推荐： Silverlight 5 - 3D - 渲染模式原因 - 暂时不可用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com