Question

我想用nvd3折线图绘制一条可拖动的终点线。这条带有可拖动终点的线与折线图分开，图表的任何部分都没有可拖动。我写了下面的代码，但是它显示了一些错误。请使用此代码帮助我，或者建议是否有其他方法可以执行此操作。

即使在正文中写入脚本之后，只有行图表中的部分代码正常工作。带有可拖动端点的代码部分仍然无效。请告诉我这里做错了什么？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> QUEST - Home </title>
    <link href='css/nv.d3.min.css' rel='stylesheet' type='text/css'>
    <style>
        g.nv-group.nv-series-1{
            stroke-dasharray: 5,5!important;            
        }

        circle {
  cursor: pointer;
}
circle:hover {
  fill : yellow;
}
line {
  stroke : black;
  stroke-width: 1;
}

    </style>
    <script src='js/jquery-1.12.3.min.js'></script>
    <script src='js/d3/d3.min.js'></script>
    <script src='js/nv/nv.d3.min.js'></script>    
    <script>
        var pointArray = [];
        var pointIndex = [];
        var dataArray = [];
        var svg = d3.select('#mysvg');
        var chartObj = nv.models.lineChart()
                    .x(function(d) { return d[0] })
                    .y(function(d) { return d[1]/100 }) 
                    .color(d3.scale.category10().range())
                    .useInteractiveGuideline(true);

        chartObj.xAxis
            .tickValues([1078030800000,1122782400000,1167541200000,1251691200000])
            .tickFormat(function(d) {
            return d3.time.format('%x')(new Date(d))});

        chartObj.yAxis
            .tickFormat(d3.format(',.1%'));


        nv.addGraph(loadGraph);    

         var Points = [
          { control1 : [ 20, 20 ],   control2 : [ 20, 80 ] },
          { control1 : [ 50, 50 ],   control2 : [ 80, 100 ] },
          { control1 : [ 120, 130 ], control2 : [ 180, 240 ]}
      ];

      var drag = d3.behavior.drag()
          .origin(function (d) {
              var circle = d3.select(this);

              //convert data to DRAG expected data
              return { x : circle.attr('cx'), y : circle.attr('cy'), data : d };
          })
          .on('drag', function (d, i) {
              var circle = d3.select(this),
                  name = circle.attr('name');

              //Update Points
              d[name][0] = d3.event.x;
              d[name][1] = d3.event.y;

              updatePoints();
          });
      function makePoints() {
          function setup(group) {
              group.append('line');
              group.append('circle').attr('name', "control1");
              group.append('circle').attr('name', "control2");
              var styles = {
                  fill   : '#ccc',
                  stroke : 'blue',
                  strokeWidth : 1,
                  radius : 5
              };
              group.selectAll('circle')
                  .attr('fill', styles.fill)
                  .attr('stroke', styles.stroke)
                  .attr('stroke-width', styles.strokeWidth)
                  .attr('r', styles.radius)
                  .call(drag);
          }

          svg.selectAll('g').data(Points)
              .enter().append('g')
              .call(setup);
      }
      function updatePoints() {
          var groups = d3.selectAll("g");
          groups.selectAll("line")
              .attr('x1', function (d) { return d.control1[0] })
              .attr('y1', function (d) { return d.control1[1] })
              .attr('x2', function (d) { return d.control2[0] })
              .attr('y2', function (d) { return d.control2[1] });
          groups.selectAll("circle")
              .attr('cx', function (d) { return d[d3.select(this).attr('name')][0]; })
              .attr('cy', function (d) { return d[d3.select(this).attr('name')][1]; })
      }




        function loadGraph(){            
            d3.select('#mysvg').datum(dataArray).call(chartObj);            
            nv.utils.windowResize(function(){
                chartObj.update;                
            });

            return chartObj;            
        }

        function getData(){
            dataArray = [];
            $.ajax({
                url: 'cumulativeLineData.json',
                method: 'get',
                async: false,
                success: function(data){
                    dataArray = data;
                }
            });            
        }





        function pageLoad(){            
            getData();                 
            loadGraph();
             makePoints();
      updatePoints();
        }






    </script>    
</head>
<body onload='pageLoad()'>
    <div id='chart'>
        <svg id='mysvg' style='width: 600px; height: 600px;'/>
    </div>
</body>
</html>

使用nvd3折线图

0 个答案: