线条未出现在折线图中,仅 y 轴和 x 轴出现在 d3.js 折线图中

问题描述 投票:0回答:1

我正在尝试在 d3.js 中创建折线图,但只有我的轴出现;该线不显示。

我认为我使用巢穴的方式可能有问题,但我不知道如何修复它。

这是我的代码执行时显示的当前状态 在此输入图片描述

这是代码片段,我使用 d3 ver 3

  // Define line generator function for Weekday Sales chart
  var lineWeekday = d3.svg.line()
    .x(function(d) { return xWeekday(d.key); })
    .y(function(d) { return yWeekday(d.value); });

  // Render Weekday Sales chart
  var xWeekday = d3.scale.ordinal().domain(totalSalesByWeekday.map(function(d) { return d.key; }))
    .rangeRoundBands([0, width], 0.1);
  var yWeekday = d3.scale.linear().domain([0, d3.max(totalSalesByWeekday, function(d) { return d.value; })])
    .range([height, 0]);

  // Render Weekday Sales line chart
  svgWeekday.append("path")
    .data(totalSalesByWeekday)
    .attr("class", "line-weekday")
    .attr("d", function(d){return lineWeekday (d);})
    .attr("fill", "none")
    .attr("stroke", "blue")
    .attr("stroke-width", 2);
  
  svgWeekday.append("g")
    .attr("class", "x-axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.svg.axis().scale(xWeekday).orient("bottom"));

  svgWeekday.append("g")
    .attr("class", "y-axis")
    .call(d3.svg.axis().scale(yWeekday).orient("left"));

我试图通过在 .data 中添加 [] 来将其变成数组,但它给了我错误,所以我被卡住了

javascript d3.js linechart linegraph
1个回答
0
投票

.datum() 而不是 .data() 将整个数据集绑定到路径。

 // Sample data
    var totalSalesByWeekday = [
      { key: "Monday", value: 150 },
      { key: "Tuesday", value: 200 },
      { key: "Wednesday", value: 250 },
      { key: "Thursday", value: 300 },
      { key: "Friday", value: 400 },
      { key: "Saturday", value: 500 },
      { key: "Sunday", value: 350 }
    ];

    // Dimensions and margins
    var margin = { top: 20, right: 30, bottom: 50, left: 50 },
        width = 800 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    // Create SVG container
    var svgWeekday = 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 + ")");

    // Scales
    var xWeekday = d3.scale.ordinal()
      .domain(totalSalesByWeekday.map(function(d) { return d.key; }))
      .rangePoints([0, width]);

    var yWeekday = d3.scale.linear()
      .domain([0, d3.max(totalSalesByWeekday, function(d) { return d.value; })])
      .range([height, 0]);

    // Line generator
    var lineWeekday = d3.svg.line()
      .x(function(d) { return xWeekday(d.key); })
      .y(function(d) { return yWeekday(d.value); });

    // Render the line
    svgWeekday.append("path")
      .datum(totalSalesByWeekday) // Bind the entire dataset
      .attr("class", "line-weekday")
      .attr("d", lineWeekday);

    // X-axis
    svgWeekday.append("g")
      .attr("class", "x-axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.svg.axis().scale(xWeekday).orient("bottom"));

    // Y-axis
    svgWeekday.append("g")
      .attr("class", "y-axis")
      .call(d3.svg.axis().scale(yWeekday).orient("left"));

    // Add labels
    svgWeekday.append("text")
      .attr("transform", "translate(" + (width / 2) + "," + (height + margin.bottom - 10) + ")")
      .style("text-anchor", "middle")
      .text("Weekdays");

    svgWeekday.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", -margin.left)
      .attr("x", -(height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Sales");
.line-weekday {
      fill: none;
      stroke: blue;
      stroke-width: 2;
    }

    .x-axis path,
    .x-axis line,
    .y-axis path,
    .y-axis line {
      shape-rendering: crispEdges;
      stroke: #ccc;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

© www.soinside.com 2019 - 2024. All rights reserved.