为什么我的 js.d3 代码不显示轴

Why is my js.d3 code not displaying axis?

本文关键字：显示 代码 d3 我的 js 为什么      更新时间：2023-09-26

我试图用这段代码制作一组 x 和 y 轴，我对为什么它们没有出现感到困惑。我希望它显示一组范围为 -10 到 10 的轴，红线位于这些轴上方。我不确定为什么轴在这个阶段不起作用，我的代码的后半部分包含轴代码。

//variable declaration
var width = 500;
var height = 300;
var margin = 10;
//svg setup
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append('g') 
            .attr("transform", "translate(" + margin + "," + margin + ")" )
//line setup
svg.append('line')
   .attr({
  x1: 0,
  y1: 0,
  x2: 250,
  y2: 250
});
//scales and axis setup
var scaleX = d3.scale.linear()
        .range([-10, 10])
        .domain([0, width])

var scaleY = d3.scale.linear()
        .range([-10, 10])
        .domain([height, 0])
var axisX = d3.svg.axis()
               .scale(scaleX)  
               .orient("bottom");
var axisY = d3.svg.axis()
               .scale(scaleY)
               .orient("left");
svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + "," + height/2 + ")")
   .call(axisX);
svg.append("g")
   .attr("class", "y axis")
   .attr("transform", "translate(" + width/2 + "," + "0)") 
   .call(axisY);

有一些错误，比如映射从域到范围而不是范围到域，使用 Svg 而不是 svg 和 svg.scale 而不是 d3.scale 等

亲眼看看https://jsfiddle.net/dango_x_daikazoku/33g9pLqe/4/

var width = 500;
var height = 300;
var margin = 30;
//svg setup
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append('g')
  .attr("transform", "translate(" + margin + "," + margin + ")");
//line setup

//scales and axis setup
var scaleX = d3.scale.linear()
  .domain([-10, 10])
  .range([0, width])
var scaleY = d3.scale.linear()
  .domain([-10, 10])
  .range([height, 0])
var axisY = d3.svg.axis()
  .scale(scaleY)
  .orient("left");
var axisX = d3.svg.axis()
  .scale(scaleX)
  .orient("bottom");
svg.append("g")
    .attr('class', 'y-axis axis')
  .call(axisY);
svg.append("g")
    .attr('class', 'x-axis axis')
  .call(axisX)
  .attr('transform', 'translate( 0, 250)')
相关文章：