Как сжать диаграмму d3.js при помощи Css

295
26 ноября 2016, 17:50

При помощи D3.js Рисую график. Столкнулся с проблемой, пытался адаптировать, страницу к телефоном. и со всеми блоками справился а с графиком не могу он обрезается но не сжимается. вот код графика.

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("g.x-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("g.y-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(d.x); 
    }) 
    .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>

Вот как выглядит на большом экране

а вот как на маленьком

Как корректо ее сжать?

READ ALSO
Проверять поля input на заполнение данных
javascript

Проверять поля input на заполнение данных

Делаю приложение маршрута на яндекс картах с API яндекса

 297
Какая разница между window.innerHeight и document.body.offsetHeight?
javascript

Какая разница между window.innerHeight и document.body.offsetHeight?

Чем отличается windowinnerHeight от document

 341
Как вывести содержимое ссылки (ссылка на 3д модель)?
javascript

Как вывести содержимое ссылки (ссылка на 3д модель)?

На данный момент всё выглядит вот так jsfiddlenet/x6uqtLab/6/ , но при срабатывании определенных radiobutton нужно выводить не соответствующую нажатым jpg картинку(как...

 281
Авторизация на jQuery+PHP+SQL
javascript

Авторизация на jQuery+PHP+SQL

Стоит задача сделать авторизацию на jQuery+PHP+SQL

 358