D3 Переход оси

Визуализация - это гистограмма, в которой диапазон высот бара велик (на несколько порядков). Я построил переход, вызванный щелчком, который увеличивает высоту всех баров с помощью мультипликативной суммы. Мне также хотелось бы, чтобы тики и метки оси y переходили к новой шкале баров. Я изменил область шкалы оси y. Переключение высоты бара отлично работает. Осевой переход ничего не делает. Кажется, я не могу правильно перевести ось. Может ли кто-нибудь помочь?D3 Переход оси

Код является простым примером того, что я пытаюсь сделать - данные фиксированы.

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="../static/js/d3.js"></script> 
<style type="text/css"> 
.axis, .axis text { 
    font: 10px sans-serif; 
} 

.axis path, .axis line { 
    fill: none; 
    stroke: #000; 
    shape-rendering: crispEdges; 
} 

.tick text { 
    font-family: sans-serif; 
    fill: black; 
} 
</style> 
</head> 
<body> 
<script type="text/javascript"> 

var xSize = 900, 
ySize = 500; 

var data = [10000, 3000, 100, 40, 10, 5, 1]; 

var margin = {top:40, right: 40, bottom:60, left: 60}; 
var width = xSize - margin.left - margin.right; 
var height = ySize - margin.top - margin.bottom; 

var barwidth = width/data.length; 
var xscale = d3.scale.linear().domain([0, data.length]).range([0, width]); 
var maxData = d3.max(data); 
var yscale = d3.scale.linear().domain([0, maxData]).range([height, 0]); 

var xAxis = d3.svg.axis().scale(xscale).orient("bottom"); 
var yAxis = d3.svg.axis().scale(yscale).orient("left"); 

var fieldView = d3.select("body") 
    .append("svg") 
    .attr("width", xSize) 
    .attr("height", ySize) 
    .on("click", update) 
; 
var chart = fieldView 
    .append("g") 
    .attr("id", "clip") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
; 
var bar = chart.selectAll("g") 
    .data(data) 
    .enter() 
    .append("rect") 
    .attr("x", function(d, i) {return xscale(i);}) 
    .attr("y", function(d) { return yscale(d);}) 
    .attr("height", function(d) { return height - yscale(d);}) 
    .attr("width", barwidth) 
    .attr("fill", "steelblue") 
    .attr("clip-path", "url(#clip)") 
; 

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

chart.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
; 

var transitionScale = 1; 
var transitionMultiplier = 5; 
var transitionYscale = d3.scale.linear().domain([0, maxData]) 
    .range([height, 0]); 
function update() { 
    // new multiplier for data 
    transitionScale *= transitionMultiplier; 
    // update to y axis domain 
    yscale.domain([0, maxData/transitionScale]); 
    // transition the bars 
    bar 
     .transition() 
     .attr("y", function(d) {return yscale(d);}) 
     .attr("height", function(d) {return height - yscale(d);}) 
     .duration(2000) 
     .ease("linear") 
    ; 
    // transition the y-axis 
    chart 
     .selectAll(".y axis") 
     .transition() 
     .call(yAxis) 
    ; 
} 
</script> 
</body> 
</html>

источник

2016-01-11 Michael Lay

Изменение выбора перехода оси от:

chart.selectAll (»Y оси. ")

к:

chart.selectAll (". y.axis ")

правильно переводит ось. Однако я не знаю, почему.

источник

2016-01-13 11:23:12

А, я знаю. "chart.selectAll (". y axis ")" является недопустимым выбором, так как нет элемента в dom. С помощью этого выбора вы пытаетесь выбрать все элементы , у которых есть родительский элемент с классом «y». Кроме того, когда вы создаете свою ось, вы делаете: «.attr (« класс »,« ось x »)». Фактически вы устанавливаете 2 класса в элементе. Поэтому, если вы хотите выбрать все элементы, которые имеют эти два класса, вам нужно сделать chart.selectAll (". Y.axis"). Я надеюсь, что это имеет смысл :-) –

Думаю, я понимаю. Поскольку я установил два класса «y» и «ось», когда я создал объект dom «g», чтобы содержать ось y, тогда «chart.selectAll («. Y ») достаточно, чтобы выбрать ось y для перехода. I нашел это, чтобы быть правдой. Спасибо за помощь. –

Да, действительно. Вы правы, и мое удовольствие –

ответ

Смежные вопросы