Как создать динамические значения масштаба Y в D3 js в зависимости от размера экрана? - PullRequest
Новая
       0

Как создать динамические значения масштаба Y в D3 js в зависимости от размера экрана?

0 голосов
/ 26 декабря 2018

Я создаю график с использованием d3 js.Мне нужно решение, чтобы изменить значения шкалы y, когда я изменяю размер окна вместо полосы прокрутки.

Я добавил код ниже, который добавляет полосу прокрутки, когда я изменяю размер экрана.Я хочу создавать динамические значения масштаба y, когда мы изменяем размеры для разных размеров экрана.`

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>
<body>

<!-- load the d3.js library --> 
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

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

// Define the line
var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

// Adds the svg canvas
var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("data.csv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
    });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

    // Add the valueline path.
    svg.append("path")  
        .attr("class", "line")
        .attr("d", valueline(data));

    // Add the X Axis
    svg.append("g")     
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")     
        .attr("class", "y axis")
        .call(yAxis);

});

</script>
</body>

`

1 Ответ

0 голосов
/ 27 декабря 2018

Метод, который мне нравится использовать, заключается в том, чтобы обернуть код в функцию (давайте назовем его main()) и выполнить повторно при изменении размера экрана.

В начале этой новой функции main() удалите старую (и теперь избыточного размера) svg. 

d3.select("#<id of svg>").remove();

Затем создайте новую шкалу y, используя 

var new_width = document.getElementById("<Div ID>").clientWidth;
var new_height = document.getElementById("<Div ID>").clientHeight;

и примените их к новому svg при его создании.D3 должен позволить вам запустить строку .remove() до того, как будет создан исходный svg.Обязательно добавьте идентификатор при создании svg (используя attr("id", "<id of svg>")).

После этого вы можете вызывать функцию main () при изменении размера с помощью 

d3.select(window).on( "resize", main() );

Способ, которым вы хотите на самом деле изменить размер Div, теперь будет зависеть от вашего CSS, поэтомуВы можете использовать что-то вроде {height:50vh} или что угодно.

Надеюсь, это поможет.

PS Кстати, а почему вы используете D3 версии 3?Мы до v5 :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...