Question

我正在尝试使用d3.js（v4）创建散点图。我是d3的新手，由于v4的示例文档有限，我正在努力创建情节（之前已经问过这里）。我的代码如下：

const margin = { top: 100, right: 50, left: 50, bottom: 50};
const width = 1300 - margin.right - margin.left;
const height = 1250 - margin.top - margin.bottom;

d3.csv("http://localhost:9000/data.csv", (error, data) => {
    if (error) throw error;

    const x = (d) => d["Category"];

    const xScale = d3.scalePoint()
                     .domain(data.map((d) => d["Category"]))
                     .range([0, width]);
    const xMap = (d) => xScale(x(d));

    const xAxis = d3.axisBottom().scale(xScale);

    // Plotting Score 1 for now
    const y = (d) => d["Score 1"];
    const yScale = d3.scaleLinear()
                     .domain([0, d3.max(data, y)])
                     .range([height, 0]);

    const yMap = (d) => yScale(y(d))

    const yAxis = d3.axisLeft().scale(yScale);

    const svg = d3.select('body')
                  .append('svg')
                  .attr('width', width)
                  .attr('height', height)
                  .append('g')
                  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


    svg.append('g')
       .attr('class', 'axis axis--x')
       .call(xAxis)
       .attr('transform', 'translate(0, 800)')
       .append('text')
       .attr('class', 'label')
       .attr('x', width)
       .attr('y', -6)
       .style('text-anchor', 'middle')
       .text('Category');

    svg.append('g')
       .attr('class', 'axis axis--y')
       .call(yAxis)
       .attr('transform', 'rotate(-90)')
       .attr('y', 0 - margin.left)
       .attr('x', 0 - (height/2))
       .attr("dy", "1em")
       .style('text-anchor', 'middle')
       .text('Score');

    svg.selectAll('circle')
       .data(data)
       .enter()
       .append('circle')
       .attr('class', 'dot')
       .attr('cx', xMap)
       .attr('cy', yMap)
       .attr('r', 3.5)
       .attr('fill', 'red');
});

给出几行data.csv：

Name,Category,Score 1,Score 2,Score 3,Average score
A1_P1,A01,2.3,2.4,4.1,2.4
A2_P1,A02,1.4,1.5,2.4,1.5
A3_P1,A03,0.9,0.9,0.9,0.9
A4_P1,B01,1.5,1.5,1,1.5
A5_P1,B02,1.2,1.2,1.4,1.2
A6_P1,B03,1,1,1.1,1
A7_P1,C01,1.6,1.2,1,1.2
A8_P1,C02,1.2,1.2,0.9,1.2
A9_P1,C03,1.1,1.1,1,1.1
A10_P1,D01,1.5,1.6,1.1,1.5

显示x轴（但不是＆＃39;类别＆＃39;标签），更重要的是，y轴根本没有显示。然而，这些点本身正确显示。有谁知道我的y轴设置和轴标签有什么问题？提前谢谢！

Answer 1

当我使用d3开始一个新图表时，我发现最好从一个已知的简单设置示例开始，以放置我的图g，轴等...这是我通常的starting point

那就是说，这是我在图表中看到的问题清单：

不动态放置x轴。
svg容器大小错误，最终位于轴顶部。
尝试将text轴标签附加到y轴但您实际上从未附加文本（然后将属性和样式应用于轴本身而不是缺少文本元素）。

清理这一切看起来像这样：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <script>
    const margin = {
      top: 100,
      right: 50,
      left: 50,
      bottom: 50
    };
    const width = 500 - margin.right - margin.left;
    const height = 500 - margin.top - margin.bottom;

    //d3.csv("data.csv", (error, data) => {
    //  if (error) throw error;
      
      var data = [{"Name":"A1_P1","Category":"A01","Score 1":"2.3","Score 2":"2.4","Score 3":"4.1","Average score":"2.4"},{"Name":"A2_P1","Category":"A02","Score 1":"1.4","Score 2":"1.5","Score 3":"2.4","Average score":"1.5"},{"Name":"A3_P1","Category":"A03","Score 1":"0.9","Score 2":"0.9","Score 3":"0.9","Average score":"0.9"},{"Name":"A4_P1","Category":"B01","Score 1":"1.5","Score 2":"1.5","Score 3":"1","Average score":"1.5"},{"Name":"A5_P1","Category":"B02","Score 1":"1.2","Score 2":"1.2","Score 3":"1.4","Average score":"1.2"},{"Name":"A6_P1","Category":"B03","Score 1":"1","Score 2":"1","Score 3":"1.1","Average score":"1"},{"Name":"A7_P1","Category":"C01","Score 1":"1.6","Score 2":"1.2","Score 3":"1","Average score":"1.2"},{"Name":"A8_P1","Category":"C02","Score 1":"1.2","Score 2":"1.2","Score 3":"0.9","Average score":"1.2"},{"Name":"A9_P1","Category":"C03","Score 1":"1.1","Score 2":"1.1","Score 3":"1","Average score":"1.1"},{"Name":"A10_P1","Category":"D01","Score 1":"1.5","Score 2":"1.6","Score 3":"1.1","Average score":"1.5"}];

      const x = (d) => d["Category"];

      const xScale = d3.scalePoint()
        .domain(data.map((d) => d["Category"]))
        .range([0, width]);
      const xMap = (d) => xScale(x(d));

      const xAxis = d3.axisBottom().scale(xScale);

      // Plotting Score 1 for now
      const y = (d) => d["Score 1"];
      const yScale = d3.scaleLinear()
        .domain([0, d3.max(data, y)])
        .range([height, 0]);

      const yMap = (d) => yScale(y(d))

      const yAxis = d3.axisLeft().scale(yScale);

      const svg = d3.select('body')
        .append('svg')
        .attr('width', width + margin.right + margin.left)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      svg.append('g')
        .attr('class', 'axis axis--x')
        .call(xAxis)
        .attr('transform', 'translate(0,' + height + ')')
        .append('text')
        .attr('class', 'label')
        .attr('x', width)
        .attr('y', -6)
        .style('text-anchor', 'middle')
        .text('Category');

      svg.append('g')
        .attr('class', 'axis axis--y')
        .call(yAxis)
        .append("text")
        .attr('transform', 'rotate(-90)')
        .attr('y', 0 - margin.left)
        .attr('x', 0 - (height / 2))
        .attr("dy", "1em")
        .style('text-anchor', 'middle')
        .text('Score')
        .style('fill', 'black')

      svg.selectAll('circle')
        .data(data)
        .enter()
        .append('circle')
        .attr('class', 'dot')
        .attr('cx', xMap)
        .attr('cy', yMap)
        .attr('r', 3.5)
        .attr('fill', 'red');
        
    //});
  </script>
</body>

</html>

Y轴不显示d3 v4的散点图

1 个答案: