Проблемы с чисткой вертикального графика D3 - PullRequest
Новая
       37

Проблемы с чисткой вертикального графика D3

0 голосов
/ 24 мая 2019

Я переворачиваю стандартный линейный график D3 v4 сбоку, делая ось Y заботящейся о шкале времени.В то же время я хотел реализовать функцию масштабирования и кисти.Все довольно стандартизировано, идентично многим функциям линейных графиков.Я почти на месте, но некоторые проблемы кажутся мне невозможными для понимания.Щетка прыгает вокруг, и я не могу понять это.

И, как побочный вопрос, есть ли проблемы с масштабированием времени для оси Y?Горизонтальная ось x интерпретирует данные json как даты (в данном случае годы), но как только я переворачиваю их на ось y, они превращаются в десятичные числа.

Я перепробовал несколько вариантов и попробовал его как на локальном Wamp-сервере, так и на общедоступном веб-хостинге.Результат получается тот же. 

var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 110, left: 40},
margin2 = {top: 20, right: 20, bottom: 30, left: 640},
width = +svg.attr("width") - margin.left - margin.right,
//width = 600,
width2 = +svg.attr("width") - margin2.left - margin2.right,
height = +svg.attr("height") - margin.top - margin.bottom,
height2 = +svg.attr("height") - margin2.top - margin2.bottom;


//var parseyear = d3.timeParse("%m/%d/%Y %H:%M");
var parseyear = d3.timeParse("%Y");


var y = d3.scaleTime().range([0, 800]),
y2 = d3.scaleTime().range([0, 800]),
x = d3.scaleLinear().range([0, width]),
x2 = d3.scaleLinear().range([0, width2]);


var xAxis = d3.axisBottom(x).ticks(15), 
yAxis = d3.axisLeft(y).ticks(15),
yAxis2 = d3.axisLeft(y2).ticks(15);

var brush = d3.brushY()
.extent([[0, 0], [width2, height]])
.on("brush end", brushed);  


var zoom = d3.zoom()
.scaleExtent([1, Infinity])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width2, height]])
.on("zoom", zoomed);


var line = d3.line()
.x(function (d) { return x( d.value);  })
.y(function (d) { return y(d.year); }); 



var line2 = d3.line()
.x(function (d) { return x2(d.value); })
.y(function (d) { return y2(d.year); });

var clip = svg.append("defs").append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("width", width)
    .attr("height", 800)
    .attr("x", 0)
    .attr("y", 0); 


var Line_chart = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .attr("clip-path", "url(#clip)");


var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

d3.json("filename.json", function(error, data) {
if (error) throw error;


x.domain([0, d3.max(data, function (d) { return d.value; })]);
y.domain(d3.extent(data, function(d) { return d.year; })); 
x2.domain(x.domain());
y2.domain(y.domain());



focus.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate("+ 0 + ", 0)")
    .call(xAxis);


focus.append("g")
    .attr("class", "axis axis--y")
    .attr("transform", "translate(0, 0)")
    .call(yAxis);

Line_chart.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);


context.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line2);


context.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(0," + 0 + ")")
.call(yAxis2);

context.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, y2.range());


svg.append("rect")
.attr("class", "zoom")
.attr("width", 600)
.attr("height", 800)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);

console.log(data);
});

function brushed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; 
// ignore brush-by-zoom
var s = d3.event.selection || y2.range();
y.domain(s.map(y2.invert, y));
Line_chart.select(".line").attr("d", line);
focus.select(".axis--y").call(yAxis);
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
  .scale(height / (s[1] - s[0]))
  .translate(-s[0], 0));
}


function zoomed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
var t = d3.event.transform;
y.domain(t.rescaleY(y2).domain());
Line_chart.select(".line").attr("d", line);
focus.select(".axis--y").call(yAxis);
context.select(".brush").call(brush.move, y.range().map(t.invertY, t));
}



function type(d) {
d.year = parseyear(d.year);
d.value = +d.value;
console.log(d.year);
console.log(d.value);
return d;
}

The json is a simple [{"year":1734,"value":0},{"year":1735,"value":0},{"year":1736,"value":12},{"year":1737,"value":0}] ... and so on.

К счастью, вся помощь получена!

/ Pelle

...