Question

我正在尝试为每次观察实现一个带散点图的多线图。

我的代码是：

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

    body { font: 12px Arial;}

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

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.legend {
    font-size: 12px;
    font-weight: bold;
    text-anchor: middle;
}

    </style>
<body>

    <!-- load the d3.js library -->
    <script src="http://d3js.org/d3.v3.min.js"></script>

    <script>

        // Set the dimensions of the canvas / graph
        var margin = {top: 30, right: 20, bottom: 70, left: 50},
        width = 1000 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

        // Parse the date / time
        var parseDate = d3.time.format("%b %d %Y").parse;

        // Set the ranges
        var x = d3.time.scale().range([0, width]);
        var y = d3.scale.linear().range([0, height]);

        // Define the axes
        var xAxis = d3.svg.axis().scale(x)
        .orient("bottom").ticks(5);

        var yAxis = d3.svg.axis().scale(y)
        .orient("left").ticks(5);

        // Define the line
        var priceline = d3.svg.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.price); })
        .interpolate("basis");


       // var circleAttributes = circles
       // .attr("cx", function (d) { return d.cx; })
       // .attr("cy", function (d) { return d.cy; })
      //  .attr("r", function (d) { return d.radius; })
      //  .style("fill", function (d) { return d.color; });

      // Define the points
     // var point = d3.svg
     //  .cx(function(d) { return x(d.date); })
     //  .cy(function(d) { return y(d.price); })
     //  .r(function(d) { return 5;})


        // Adds the svg canvas
        var svg = d3.select("body")
        .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 + ")");

              // Get the data
              d3.csv("stocks.csv", function(error, data) {
                     data.forEach(function(d) {
                                  d.date = parseDate(d.date);
                                  d.price = +d.price;
                                  });

                     // Scale the range of the data
                     x.domain(d3.extent(data, function(d) { return d.date; }));
                     y.domain([0, d3.max(data, function(d) { return d.price; })]);

                     // Nest the entries by symbol
                     var dataNest = d3.nest()
                     .key(function(d) {return d.symbol;})
                     .entries(data);

                     var color = d3.scale.category20();   // set the colour scale

                     legendSpace = width/dataNest.length; // spacing for the legend

                     // Loop through each symbol / key
                     dataNest.forEach(function(d,i) {

                                      svg.append("path")
                                      .attr("class", "line")
                                      .style("stroke", function() { // Add the colours dynamically
                                             return d.color = color(d.key); })
                                      .attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID
                                      .attr("stroke-width", 2)
                                      //.style("opacity", 0)
                                      .attr("d", priceline(d.values));

                                     // console.log(d.price)
                                     // console.log(d.price.values)


                                      // Add the scatterplot
                                      svg.selectAll("dot")
                                      .data(d.values)
                                      .enter().append("circle")
                                      .attr("r", 1.5)
                                      .attr("cx", function(d) { return x(d.date); })
                                      .attr("cy", function(d) { return y(d.price); });



                                     // svg.enter()
                                     // .append("circle")
                                     // .attr("cy", function(d) { return y(d.price); })
                                     // .attr("cx", function(d) { return x(d.date); })
                                     // .attr("r", 9)
                                     // .attr("opacity", 0.15)

                                      //svg.append("path")
                                      //.attr("class", "circle")
                                      //.attr("cy", points(d.values))
                                      //.attr("opacity", 0.15)

                                      if(i<10){
                                      // Add the Legend
                                      svg.append("text")
                                      .attr("x",(((i+1)*100-80)))  // space legend
                                      .attr("y", height + (margin.bottom/2)+ 5)
                                      .attr("class", "legend")    // style the legend
                                      .style("fill", function() { // Add the colours dynamically
                                             return d.color = color(d.key); })
                                      .on("click", function(){
                                          // Determine if current line is visible 
                                          var active   = d.active ? false : true,
                                          newOpacity = active ? 1 : 0;
                                          // Hide or show the elements based on the ID
                                          d3.select("#tag"+d.key.replace(/\s+/g, ''))
                                          .transition().duration(100) 
                                          .style("opacity", newOpacity); 
                                          // Update whether or not the elements are active
                                          d.active = active;
                                          })  
                                      .text(d.key);
                                      }
                                      else{
                                      svg.append("text")
                                      .attr("x", ((i-9)*100-80))  // space legend
                                      .attr("y", height + (margin.bottom/2)+30)
                                      .attr("class", "legend")    // style the legend
                                      .style("fill", function() { // Add the colours dynamically
                                             return d.color = color(d.key); })
                                      .on("click", function(){
                                          // Determine if current line is visible
                                          var active   = d.active ? false : true,
                                          newOpacity = active ? 0 : 1;
                                          // Hide or show the elements based on the ID
                                          d3.select("#tag"+d.key.replace(/\s+/g, ''))
                                          .transition().duration(100)
                                          .style("opacity", newOpacity);
                                          // Update whether or not the elements are active
                                          d.active = active;
                                          })
                                      .text(d.key);
                                      }
                                      });

                     // Add the X Axis
                     svg.append("g")
                     .attr("class", "x axis")
                     .attr("transform", "translate(0," + height + ")")
                     .call(xAxis);

                     // Add the Y Axis
                     svg.append("g")
                     .attr("class", "y axis")
                     .call(yAxis);

                     });

        </script>
</body>

结果是：

代码结果

因此，它适用于第一天，但过去几天会重复相同的点。

多线图d3js上的散点图

0 个答案: