Question

这是一个愚蠢的问题，我无法通过搜索找到解决方法。

我的代码：

//Create canvas
var svg = d3.select("svg"),
    margin = {top: 20, right: 0, bottom: 20, left: 20},
    padding = {top: 0, right: 0, bottom: 0, left: 0},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .attr("transform", "translate(" + padding.left + "," + padding.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()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(+d.value); });

d3.json("api.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.domain(d3.extent(data, function(d) { return d.date; }));
  //y.domain([0, d3.max(data, function(d) { return d.value; })]);

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

  //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 fruit of interest
        var selectStock = nest.filter(function(d){
                return d.key == stock;
              })

        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(data, function(d) { return d.value; })])
            });

        var initialPath = selectStockGroups.selectAll(".line")
            .datum(function(d) { return d.values; })
            .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.axisRight(y)
              .ticks(5)
              .tickSizeInner(0)
              .tickPadding(6)
              .tickSize(0, 0));

          // Add a label to the y axis
          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 fruit of interest
        var selectStock = nest.filter(function(d){
                return d.key == stock;
              })

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

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

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

    // Find which fruit was selected from the dropdown
    var selectedStock = d3.select(this)
            .select("select")
            .property("value")

        // Run update function with the selected fruit
        updateGraph(selectedStock)
  });
});

我正在尝试通过从api导入数据来创建标准折线图。

我故意使用d3.axisRight来显示屏幕截图，但是如果使用d3.axisLeft，则轴比例尺不会出现在画布上。我一直在摆弄边距以将y轴向右移动，但还没有找到方法...

由于某种原因，我的行无法打印，并且控制台上没有任何错误...

谢谢。

Answer 1

我将代码分为2：1）svg的尺寸； 2）从给定尺寸创建svg。我还删除了g变量。

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

D3.js将图表区域向右移

1 个答案: