1

Есть столбцовая диаграмма, не могу довести до ума мелочи, необходимо чтобы на боковой оси(y) отображались значения не просто цифрами, а с процентами. Еще свойство ticks(4) работает не корректно отображает более 4 делений пробовал заменить на (3) три деления и остается, и последние не могу вывести над столбиком значение массива y. Заранее всем спасибо!

Вот код с коментариями:

 

 var height = 600,
   width = 900,
   margin = 30,
   padding = 45,
   data = [{
       x: 1,
       y: 50
     }, {
       x: 2,
       y: 67
     }, {
       x: 3,
       y: 74
     }, {
       x: 4,
       y: 63
     }, {
       x: 5,
       y: 56
     }, {
       x: 6,
       y: 24
     }, {
       x: 7,
       y: 26
     }, {
       x: 8,
       y: 19
     }, {
       x: 9,
       y: 42
     }, {
       x: 10,
       y: 88
     },

   ];

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

 // длина оси X= ширина контейнера svg - отступ слева и справа
 var xAxisLength = width - 2 * margin;

 // длина оси Y = высота контейнера svg - отступ сверху и снизу
 var yAxisLength = height - 2 * margin;

 // функция интерполяции значений на ось Х
 var scaleX = d3.scale.linear()
   .domain([1, data.length + 1])
   .range([0, xAxisLength]);

 // функция интерполяции значений на ось Y
 var scaleY = d3.scale.linear()
   .domain([100, 0])
   .range([0, yAxisLength]);

 // создаем ось X
 var xAxis = d3.svg.axis()
   .scale(scaleX)
   .orient("bottom");
 // создаем ось Y
 var yAxis = d3.svg.axis()
   .scale(scaleY)
   .orient("left")
   .ticks(4);


 // отрисовка оси Х
 svg.append("g")
   .attr("class", "x-axis")
   .attr("transform", // сдвиг оси вниз и вправо
     "translate(" + margin + "," + (height - margin) + ")")
   .call(xAxis);

 // отрисовка оси Y
 svg.append("g")
   .attr("class", "y-axis")
   .attr("transform", // сдвиг оси вниз и вправо на margin
     "translate(" + margin + "," + margin + ")")
   .call(yAxis);

 // рисуем горизонтальные линии
 d3.selectAll("g.y-axis g.tick")
   .append("line")
   .classed("grid-line", true)
   .attr("x1", 0)
   .attr("y1", 0)
   .attr("x2", xAxisLength)
   .attr("y2", 0);

 // создаем объект g для прямоугольников
 var g = svg.append("g")
   .attr("class", "body")
   .attr("transform", // сдвиг объекта вправо
     "translate(" + '50' + ", 0 )");
 // связываем данные с прямоугольниками
 g.selectAll("rect.bar")
   .data(data)
   .enter()
   .append("rect")
   .attr("class", "bar");
 // устанавливаем параметры прямоугольников
 g.selectAll("rect.bar")
   .data(data)
   .text(String)
   // .style('width', function(d,x) { return widthScale(d, y) + 'px'; } )
   .attr("x", function(d) {
     return scaleX(d.x);
   })
   .attr("y", function(d) {
     return scaleY(d.y) + margin;
   })
   .attr("height", function(d) {
     return yAxisLength - scaleY(d.y);
   })
   .attr("width", function(d) {


     return Math.floor(xAxisLength / data.length) - padding;
   });
.axis path,
.axis line {
  fill: none;
  stroke: #333;
}
.axis .grid-line {
  stroke: #000;
  stroke-opacity: 0.2;
}
.axis text {
  font: 10px Verdana;
}
.bar:hover {
  fill: #FF0000;
}
.bar {
  stroke: none;
  fill: #848484;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js">
  </script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
  <input type="button" value="delete" onclick=$ ( '.bar').remove()>
</body>

</html>

Пытаюсь добиться эффекта как на картинке введите сюда описание изображения

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Посмотрите другие вопросы с метками или задайте свой вопрос.