Question

伙计们，我使用公开的股票数据创建了时间序列折线图。

我要去的地方是：

看起来正在执行的操作是将第一个数据点与最后一个数据点连接起来，这就是为什么要在整个图表上创建一条线。

我在网上看了看，发现要创建一个不连续的折线图，我可以添加

.defined(function(d) { return d; })

我做到了，但没有帮助。

我的代码：

        //Set dimensions and margins for the graph
        var margin = {top: 20, right: 20, bottom: 100, left: 70},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        //Create 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 + ")");

        //Parse date
        var parseDate = d3.timeParse("%Y-%m-%d");

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

        // Define the line
        var valueLine = d3.line()
            .defined(function(d) { return d; })
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.value); });

        //Import data from api
        d3.json("api_all.php", function(error, data) {
          if (error) throw error;
          data.forEach(e => {
            e.date = parseDate(e.date);
            e.value = +e.close;
            e.stockName = e.stock_name;
            e.stockSymbol = e.stock_symbol;
          });

          //Create nest variable
          var nest = d3.nest()
              .key(function(d){ return d.stockSymbol; })
              .entries(data);

          console.log(nest);
          //Scale the range of the data
          //x axis scale for entire dataset
          x.domain(d3.extent(data, function(d) { return d.date; }));
          //y.domain([0, d3.max(data, function(d) { return d.value; })]);

          //Add the x axis
          var xaxis = svg.append("g")
              .attr("transform", "translate(0," + height + ")")
              .attr("class", "x axis")
              .call(d3.axisBottom(x));

          //Add x axis label
          svg.append("text")
              .attr("transform", "translate(" + (width/2) + "," + (height + margin.top + 10) + ")")
              .attr("dy", "1em")
              .style("text-anchor", "middle")
              .text("Date")
              .attr("class", "x axis label");

          //Create dropdown
          var dropDown = d3.select("#dropDown")
          dropDown
            .append("select")
            .selectAll("option")
              .data(nest)
              .enter()
              .append("option")
              .attr("value", function(d){ return d.key; })
              .text(function(d){ return d.key; })

          // Function to create the initial graph
            var initialGraph = function(stock){

                // Filter the data to include only stock of interest
                var selectStock = nest.filter(function(d){
                        return d.key == stock;
                      })
              console.log(selectStock)

              //Unnest selectStock for y axis
              var unnested = function(data, children){
                        var out = [];
                  data.forEach(function(d, i){
                    console.log(i, d);
                    d_keys = Object.keys(d);
                    console.log(i, d_keys)
                    values = d[children];

                    values.forEach(function(v){
                        d_keys.forEach(function(k){
                        if (k != children) { v[k] = d[k]}
                      })
                      out.push(v);
                    })

                  })
                  return out;
                }
                var selectStockUnnested = unnested(selectStock, "values");


              //Scale y axis
                var selectStockGroups = svg.selectAll(".stockGroups")
                    .data(selectStock, function(d){
                      return d ? d.key : this.key;
                    })
                    .enter()
                    .append("g")
                    .attr("class", "stockGroups")
                    .each(function(d){
                        y.domain([0, d3.max(selectStockUnnested, function(d) { return d.value; })])
                        console.log(selectStockUnnested);
                    });

                var initialPath = selectStockGroups.selectAll(".line")
                    .data(selectStock)
                    .enter()
                    .append("path")

                initialPath
                    .attr("d", function(d){ return valueLine(d.values) })
                    .attr("class", "line")

                  //Add the y axis
              var yaxis = svg.append("g")
                  .attr("class", "y axis")
                    .call(d3.axisLeft(y)
                      .ticks(5)
                      .tickSizeInner(0)
                      .tickPadding(6)
                      .tickSize(0, 0));

                  //Add y axis label
                  svg.append("text")
                        .attr("transform", "rotate(-90)")
                        .attr("y", 0 - 60)
                        .attr("x", 0 - (height / 2))
                        .attr("dy", "1em")
                        .style("text-anchor", "middle")
                        .text("Price")
                        .attr("class", "y axis label");
            }

          // Create initial graph
            initialGraph("1301.T")

            // Update the data
            var updateGraph = function(stock){

                // Filter the data to include only stock of interest
                var selectStock = nest.filter(function(d){
                        return d.key == stock;
                      })
            console.log(selectStock);

            //Unnest selectStock for y axis
            var unnested = function(data, children){
                var out = [];
                data.forEach(function(d, i){
                  console.log(i, d);
                  d_keys = Object.keys(d);
                  console.log(i, d_keys)
                  values = d[children];

                  values.forEach(function(v){
                    d_keys.forEach(function(k){
                      if (k != children) { v[k] = d[k]}
                    })
                    out.push(v);
                  })

                })
                return out;
              }
              var selectStockUnnested = unnested(selectStock, "values");

                // Select all of the grouped elements and update the data
                var selectStockGroups = svg.selectAll(".stockGroups")
                    .data(selectStock)
                    .each(function(d){
                        y.domain([0, d3.max(selectStockUnnested, function(d) { return d.value; })])
                    });

                    // Select all the lines and transition to new positions
                    selectStockGroups.selectAll("path.line")
                       .data(selectStock)
                       .transition()
                          .duration(1000)
                          .attr("d", function(d){
                            return valueLine(d.values)
                          })

                // Update the Y-axis
                    d3.select(".y")
                            .transition()
                            .duration(1500)
                            .call(d3.axisLeft(y)
                              .ticks(5)
                              .tickSizeInner(0)
                              .tickPadding(6)
                              .tickSize(0, 0));
            }
          // Run update function when dropdown selection changes
          dropDown.on('change', function(){

            // Find which stock was selected from the dropdown
            var selectedStock = d3.select(this)
                    .select("select")
                    .property("value")
            console.log(selectedStock);
                // Run update function with the selected stock
                updateGraph(selectedStock)
          });
        });

        </script>
      </body>

D3.js折线图连续，但不连续

0 个答案: