Question

我试图用这个代码制作一组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);

Answer 1

有一些错误，比如映射从域到范围而不是范围到域和使用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)')

为什么我的js.d3代码没有显示轴？

1 个答案: