D3을 사용하여 Google 차트에 선 그리기

Google 차트 SVG를 선택한 다음 마우스를 클릭하여 끌어서 그려지는 선을 추가하려고합니다.D3을 사용하여 Google 차트에 선 그리기

나는 선이 var graph = d3.select("body").append("svg")

을 수행하여 빈 SVG에 그리는하지만 내가 아래에있는 내 코드에서처럼 구글 차트 SVG를 선택하려고 할 때 때, 내가 어떤 라인을 그리기하지 않습니다 얻을 수 있습니다 마우스를 클릭하고 드래그하십시오.

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <style> 
     line { 
      stroke: black; 
      stroke-width: 1px; 
     } 
     svg { 
      border: 1px; 
     } 
    </style> 
</head> 
<body> 
<!--<div id="regions_div" style="width: 900px; height: 500px;"></div> --> 
<div id="regions_div"></div> 
<script> 
    google.load("visualization", "1", {packages:["geochart"]}); 
    google.setOnLoadCallback(drawRegionsMap); 

    function drawRegionsMap() { 

     var data = google.visualization.arrayToDataTable([ 
      ['Country', 'Popularity'], 
      ['Germany', 200], 
      ['United States', 300], 
      ['Brazil', 400], 
      ['Canada', 500], 
      ['France', 600], 
      ['RU', 700] 
     ]); 

     var options = {}; 

     var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); 

     chart.draw(data, options); 

     // Draw lines 
     var line; 
     var graph = d3.select("svg") 
      .on("mousedown", mousedown) 
      .on("mouseup", mouseup); 

     function mousedown() { 
      var m = d3.mouse(this); 
       line = graph.append("line") 
       .attr("x1", m[0]) 
       .attr("y1", m[1]) 
       .attr("x2", m[0]) 
       .attr("y2", m[1]); 

      graph.on("mousemove", mousemove); 
     } 

     function mousemove() { 
      var m = d3.mouse(this); 
      line.attr("x2", m[0]) 
        .attr("y2", m[1]); 
     } 
     function mouseup() { 
      vis.on("mousemove", null); 
     } 
    } 

</script> 
</body> 
</html>

출처

2014-12-05 brno792

그래서 조금 변경했습니다. 문서 준비 이벤트를 간단하게 처리 할 수 있도록 라이브러리 jquery를 추가했습니다. 다음은 내가 그리는 데이터를 추출하여 포인트라고하는 변수에 넣는 것입니다. 그걸로 나는 d3에게 그 데이터를 사용하도록 지시하고, 그것이 변할 때 당신의 일을 행한다.

HTH

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <style> 
     line { 
      stroke: black; 
      stroke-width: 1px; 
     } 
     svg { 
      border: 1px; 
     } 
    </style> 
</head> 
<body> 
<!--<div id="regions_div" style="width: 900px; height: 500px;"></div> --> 
<div id="regions_div"></div> 

<script> 
    google.load("visualization", "1", {packages:["geochart"]}); 
    google.setOnLoadCallback(drawRegionsMap); 
    points = []; 
    mousedown = false; 

    function drawRegionsMap() { 

     var data = google.visualization.arrayToDataTable([ 
      ['Country', 'Popularity'], 
      ['Germany', 200], 
      ['United States', 300], 
      ['Brazil', 400], 
      ['Canada', 500], 
      ['France', 600], 
      ['RU', 700] 
     ]); 

     var options = {}; 

     var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); 

     chart.draw(data, options); 



    } 


    $(function() { 
     $(document).mousedown(function() { 
      mousedown = true 
     }); 
     $(document).mouseup(function() { 
      mousedown = false 
     }); 
     $(document).mousemove(function (e) { 
      if (mousedown) { 
       points.push({x: e.pageX, y: e.pageY}); 
       drawLines(); 
      } 
     }); 

     // Draw lines 
     function drawLines() { 
      if (points.length > 1) { 
       var lineUpdate = d3.select("svg").selectAll("line").data(points); 
       lineUpdate.enter().append("line") 
         .attr("x1", function (d, i) { 
          return points[i - 1].x 
         }) 
         .attr("y1", function (d, i) { 
          return points[i - 1].y 
         }) 
         .attr("x2", function (d, i) { 
          return points[i].x 
         }) 
         .attr("y2", function (d, i) { 
          return points[i].y 
         }) 
         .attr("style", "stroke:rgb(255,0,0);stroke-width:2"); 
      } 
     } 
    }); 

</script> 
</body> 
</html>

출처

2014-12-05 01:38:41 getbuckts

D3을 사용하여 Google 차트에 선 그리기

답변

관련 문제