个人中心
gpt4 book ai didi

javascript - d3 v4 的散点图不显示 Y 轴

转载 作者：行者123 更新时间：2023-12-03 05:09:41 25 4
gpt4 key购买 nike

我正在尝试使用 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 轴正在显示(但不显示“类别”标签)，更重要的是，y 轴根本没有显示。不过，这些点本身的显示是正确的。有谁知道我的 y 轴设置和轴标签有什么问题？提前致谢!

最佳答案

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

也就是说，这是我在图表中看到的问题列表:

  1. 不动态放置 x 轴。
  2. svg 容器尺寸错误并最终位于轴的顶部。
  3. 尝试将 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>

关于javascript - d3 v4 的散点图不显示 Y 轴，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41874109/

25 4 0
文章推荐： javascript - 强制链接在 WordPress 的原始窗口中打开
文章推荐： javascript - 如何将属性 `preserveAspectRatio` 添加到 Highchart svg
文章推荐： javascript - 使用 PHP 和 JS 显示单独列的多个计时器!但显示 "EXPIRED EVERYTIME"
文章推荐： javascript - 数组比较不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com