Проблемы с созданием оси y в d3

У меня возникают некоторые существенные трудности, связанные с получением моей оси y на моем графике. Вы должны будете простить меня, потому что я относительный новичок в этом, и мой код, вероятно, не соответствует некоторым стандартам. Надеюсь, некоторые из вас справятся с задачей помочь мне в этом. Я получил ось x, чтобы нормально работать с моим xscale, и когда я добавляю ее, я вижу ее внизу. Однако ось y не работает, и я не могу на всю жизнь понять, как заставить мою ось y появиться. Что я делаю не так? Мои xScale и yScale - это две первые шкалы, и я пытаюсь добавить оси в нижней части. Заранее спасибо за любую помощь в этом.Проблемы с созданием оси y в d3

<!DOCTYPE html> 
<html> 
<head> 
    <title> Digital Humanities Latin Graph</title> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> 
</head> 
<body> 
<div id="graph"> 
</div> 

<script type="text/javascript"> 



     var romandataset= [ {"year": 1800, "freq": 10.45 }, 
        {"year": 1850, "freq": 9.49 }, 
        {"year": 1900, "freq": 7.16 }, 
        {"year": 1950, "freq": 6.28 }, 
        {"year": 2000, "freq": 5.25 }, 
        {"year": 2008, "freq": 5.18 } ]; 

     var greekdataset= [  {"year": 1800, "freq": 9.1 }, 
        {"year": 1850, "freq": 7.86 }, 
        {"year": 1900, "freq": 7.07 }, 
        {"year": 1950, "freq": 8.00 }, 
        {"year": 2000, "freq": 8.43 }, 
        {"year": 2008, "freq": 8.49} ]; 

     var padding = 200 
     var w = 1100 
     var h = 800 




     var xScale = d3.scale.linear() 
       .domain([1800, 2010]) 
       .range([padding, w - padding]) 



     var yScale = d3.scale.linear() 
       .domain([5.00, 11.00]) 
       .range([h - padding, padding]) 

     var romancolorscale = d3.scale.linear() 
       .domain([3.00, 11]) 
       .range(["white", "blue"]) 

     var radiusscale = d3.scale.linear() 
       .domain([5.18, 10.45]) 
       .range([10, 20]) 


     var greekcolorscale = d3.scale.linear() 
       .domain([3.00, 12.00]) 
       .range(["white", "green"]) 

     var xAxis = d3.svg.axis() 
       .scale(xScale) 
       .ticks(6); 

     var yAxis = d3.svg.axis() 
       .scale(yScale) 
       .orient("left") 
       .ticks(5); 


      var svg = d3.select("body") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 

      svg.selectAll("circle") 
      .data(romandataset)       
      .enter() 
        .append("circle") 
       .attr("cx", function (d) {return xScale(d.year) }) 
        .attr("cy", function (d) {return yScale(d.freq) }) 
        .attr("r", function (d) {return radiusscale(d.freq) }) 
        .style("stroke", "gray") 
      .style("fill", function (d) { return romancolorscale(d.freq)}); 


      svg.selectAll("rect") 
       .data(greekdataset) 
      .enter() 
      .append("circle") 

      .attr("cx", function (d) {return xScale(d.year) }) 
        .attr("cy", function (d) {return yScale(d.freq) }) 
        .attr("r", function (d) {return radiusscale(d.freq) }) 
        .style("stroke", "gray") 
      .style("fill", function (d) { return greekcolorscale(d.freq)}); 

      svg.append("g") 
      .attr("transform", "translate(0," + (h - padding) + ")") 
      .call(xAxis) 
      .orient[("bottom")]; 

      svg.append("g") 
       .attr("class", "axis") 
      .attr("transform", "translate(" + padding + ",0)") 
       .call(yAxis); 



    </script> 
    </body> 
    </html>

источник

2013-09-24 user2812439

Вы пытаетесь ориентировать прилагаемую g элемент для оси х, что дает ошибку и следующий код (который будет рисовать ось у) не выполняется.

Просто удалить последнюю строку из

svg.append("g") 
     .attr("transform", "translate(0," + (h - padding) + ")") 
     .call(xAxis) 
     .orient[("bottom")];

и поместить его там, где определяется ось: (. Вы также не нужны квадратные скобки вокруг него)

var xAxis = d3.svg.axis() 
      .scale(xScale) 
      .orient("bottom") 
      .ticks(6);

Рабочий код (которому требуется больше работы) here.

источник

2013-09-24 19:14:15

Ларс: это очень полезно, спасибо. Вы делаете отличный сервис, помогая таким людям, как я, здесь. Пожалуйста, продолжайте отличную работу. – user2812439

Проблемы с созданием оси y в d3

ответ

Смежные вопросы