There is a bar chart, I can’t bring to mind little things, it is necessary that the values on the lateral axis (y) are displayed not just in numbers, but with percentages. Another ticks (4) property does not correctly display more than 4 divisions; I tried to replace the three divisions with (3) and it remains, and I cannot display the last over the bar value of the array y. Thank you in advance!
Here is the code with comments:
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("gy-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(dx); }) .attr("y", function(d) { return scaleY(dy) + margin; }) .attr("height", function(d) { return yAxisLength - scaleY(dy); }) .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> I am trying to achieve the effect as in the picture. 
