How to compress d3.js diagram with Css

Question

With D3.js I draw a graph. Faced a problem, tried to adapt, the page to the phone. and coped with all the blocks but I can’t do it with the schedule, it is cut off but not compressed. here is the chart code.

var width = 850, height = 500, margin=30, padding =20, data = [ {"x": 0.3, "label": 1, "value": 51, "selected": 1}, {"x": 1.3, "label": 2, "value": 67, "selected": 0}, {"x": 2.3, "label": 3, "value": 74, "selected": 0}, {"x": 3.3, "label": 4, "value": 63, "selected": 0}, {"x": 4.3, "label": 5, "value": 56, "selected": 0}, {"x": 5.3, "label": 6, "value": 24, "selected": 0}, {"x": 6.3, "label": 7, "value": 26, "selected": 0}, {"x": 7.3, "label": 8, "value": 19, "selected": 0}, {"x": 8.3, "label": 9, "value": 42, "selected": 0}, {"x": 9.3, "label": 10, "value": 88, "selected": 0} ]; var svg = d3.select("#chart").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([0, 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) .tickFormat(function(d) { return d + '%'; }); // отрисовка оси Х 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('text') .style('font-family', 'Ubuntu'); // Вертикальные линии d3.selectAll("gx-axis g.tick") .append("line") // добавляем линию .classed("grid-line", true) // добавляем класс .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", - (height - 2 * margin)); // рисуем горизонтальные линии d3.selectAll("gy-axis g.tick") .append("line") .classed("grid-line", true) .attr("x1", 0) .attr("y1", 0) .attr("x2", xAxisLength) .attr("y2", 0) .attr("stroke","#ff0"); // создаем объект g для прямоугольников var g =svg.append("g") .attr("class", "body") .attr("transform", // сдвиг объекта вправо "translate(" + margin + ", 0 )"); // связываем данные с прямоугольниками g.selectAll("rect.bar") .data(data) .enter() .append("rect") .attr("class", "bar"); // устанавливаем параметры прямоугольников g.selectAll("rect.bar") .data(data) .attr("x", function (d) { return scaleX(dx); }) .attr("y", function (d) { return scaleY(d.value) + margin; }) .attr("height", function (d) { return yAxisLength - scaleY(d.value); }) .attr("width", function(d) { return Math.floor(xAxisLength / data.length) - padding; }) .attr("fill", function (d) { if (d.selected === 0) { return "#ACBBC2"; } else { return "#EE1D23"; } }); // кнопка удаления диаграммы // onclick= $('.bar').remove(); </script>

 .axis { background-color: lightgoldenrodyellow; } .axis path, .axis line { fill: none; stroke: #333; } .axis .grid-line { stroke: #000; shape-rendering: crispedges; font-family: Ubuntu; stroke-opacity: 0.2; } .axis text { font: 10px Verdana; } .bar { width : 20px; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <div id="chart"></div> </body> </html>

Here's how it looks on the big screen.

and here is how on small

How to squeeze it correctly?

I'm talking about the width and height, which are the first in the script.
I have not seen anywhere operations on the calculations of these values, depending on page sizes
I threw an example in the working version. It looks like media screen and (max-width: 480px) {parent <div> width 100%, svg width 95% but it did not shrink but clipped.
Whatever CSS classes you apply to the canvas - it will remain the same size that will be fed here: d3.select("#chart").append("svg").attr("width", width).attr("height", height);
You can just check this: change the width and height in the script and your schedule will change.
To compress the graph dynamically for different devices, you can specify a media-query for the class of the element where the graph is embedded, and before starting the construction of the graph, get the width / height of the element and substitute it into your height and width

How to compress d3.js diagram with Css

0

More articles: