Question

我是一个绝对的初学者，并创建了一个折线图-yaxis刻度增量为1000,2000,3000,4000-我很想找到例如SVG坐标-2000刻度，我该怎么办这个吗？

以下是值：

时间，值 11：00,1600 2000年11月30日 12：00,1000 12：30,1100 13：00,4300 13：30,3140 14：00,4800 14：30,1720 15：00,1000 15：30,960 16：00,3210

这是代码，（您可以告诉我是新手-欢迎任何建议）

<html>  
  <head>  
    <link rel="stylesheet" href="index.css">  
  </head>  
  <body>  
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://code.highcharts.com/stock/highstock.js"></script>  
    <!-- Create a div where the graph will take place -->
    <div id="my_dataviz"></div>


<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width =  1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Define the div for the tooltip
var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

//Read the data
d3.csv("file://Values.csv",

  // When reading the csv, I must format variables:
  function(d){
    return { date : d3.timeParse("%I:%M")(d.time), value : d.value }
  },

  // Now I can use this dataset:

  function(data) {


    // Add X axis --> it is a date format
    var x = d3.scaleTime()
      .domain(d3.extent(data, function(d) { return d.date; }))
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
      .style("font-size", "16px");
      var formatTime = d3.timeFormat("%H:%M");

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([0, 5000])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y))
      .style("font-size", "16px");
 // Horixontal Grid Lines     
 svg.selectAll("line.horizontalGrid").data(y.ticks(18)).enter()
    .append("line")
        .attr("class","horizontalGrid")
        .attr("x1" , 0)
        .attr("x2" , width)
        .attr("y1" , function(d){ return y(d);})
        .attr("y2" , function(d){ return y(d);})
        .attr("fill","none")
        .attr("shape-rendering","crispEdges")
        .attr("stroke", "#ccc")
        .attr("stroke-width", "0.5px")
//Vertical Grid Lines     
 svg.selectAll("line.verticalGrid").data(x.ticks(18)).enter()
    .append("line")
        .attr("class","verticalGrid")
        .attr("y1" , 0)
        .attr("y2" , height)
        .attr("x1" , function(d){ return x(d);})
        .attr("x2" , function(d){ return x(d);})
        .attr("fill","none")
        .attr("shape-rendering","crispEdges")
        .attr("stroke", "#ccc")
        .attr("stroke-width", "0.5px")

    // Add the line
    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function(d) { return x(d.date) })
        .y(function(d) { return y(d.value) })
        )

   // Add the scatter plot
   svg.selectAll("myCircles")
      .data(data)
      .enter()
      .append("circle")
        .attr("fill", "Black")
        .attr("stroke", "none")
        .attr("cx", function(d) { return x(d.date) })
        .attr("cy", function(d) { return y(d.value) })
        .attr("r", 3)
        .on("mouseover", function(d) {      
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html("X: " +(d3.event.pageX) + "px" + " Y: " + (d3.event.pageY - 28) + "px" + "<br/>") 
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })                  
        .on("mouseout", function(d) {       
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        }); 

})
</script>
  </body>  
</html>

预先感谢

如何在折线图中找到特定文本刻度的SVG坐标？

0 个答案: