Данные гистограммы не прокручиваются, когда данные находятся за пределами диапазона высоты SVG - PullRequest
Новая
       90

Данные гистограммы не прокручиваются, когда данные находятся за пределами диапазона высоты SVG

0 голосов
/ 11 ноября 2019

У меня есть гистограмма, составленная с использованием JavaScript. У меня проблема, когда данные гистограммы находятся вне диапазона от высоты SVG. Например, высота SVG составляет 550 пикселей, а данные гистограммы Y - 650 пикселей. Результат оказался не таким, как я ожидал, просто так.

https://i.stack.imgur.com/lwQuz.png

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

Мой скрипт -------------- 

//Chart-Horizontal
var arrData = [
  {"name":"Andikha", "value":100, "value2":25},
  {"name":"Brili", "value":25, "value2":20},
  {"name":"Una", "value":20, "value2":15},
  {"name":"Feri", "value":15, "value2":10},
  {"name":"Eren", "value":10, "value2":5},
  {"name":"Arnold", "value":75, "value2":50},
  {"name":"Anthony", "value":90, "value2":50},
  {"name":"Kilua", "value":40, "value2":20},
  {"name":"Diguna", "value":8, "value2":2},
  {"name":"Kol", "value":8, "value2":2}
];

//Sorts bars based on value
arrData = arrData.sort(function(a,b){
  return d3.ascending(a.value, b.value);
})

//Set up svg using margin conventions - we'll need plenty of room on the left for labels
var margin = {
  top: 15, right: 25, bottom: 15, left: 60
};

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    barWidth = 200,
    seperateHeight = 0;
    splitHeight = 5;

var svg = d3.select("body").append("svg")
    // .attr("viewBox", "0,0,1024,350")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scale.linear()
    .range([0, width*0.75])
    .domain([0, d3.max(arrData, function (d) {
        return d.value;
    })]);

var y = d3.scale.ordinal()
    .rangeRoundBands([height, 0])
    .domain(arrData.map(function (d) {
        return d.name;
    }));

//make y axis to show bar names
var yAxis = d3.svg.axis()
    .scale(y)
    //no tick marks
    .tickSize(0)
    .orient("left");

var gy = svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
    // .attr('transform', "translate(" + 0 + ", " + height * -0.02 + ")");

var bars = svg.selectAll(".bar")
    .data(arrData)
    .enter()
    .append("g");

//append rects
bars.append("rect")
    .attr("class", "bar")
    .attr("y", function (d) {
        return y(d.name);
    })
    .attr("height", barWidth - 150)
    .attr("x", 0)
    .attr("width", function (d) {
        return x(d.value);
    })
    .transition()
    .duration(1500)
    .style("overflow-y", "scroll");

//append rects
bars.append("rect")
    .attr("class", "bar1")
    .attr("y", function (d) {
        return y(d.name);
    })
    .attr("height", barWidth - 165)
    .attr("x", 0)
    .attr("width", function (d) {
        return x(d.value2);
    })
    .attr('transform', "translate(" + 0 + ", " + height * 0.015 + ")");

//add a value label to the right of each bar
bars.append("text")
    .attr("class", "label")
    //y position of the label is halfway down the bar
    .attr("y", function (d) {
        return y(d.name) + y.rangeBand() / 2;
    })
    //x position is 3 pixels to the right of the bar
    .attr("x", function (d) {
        return x(d.value) + 30;
    })
    .text(function (d) {
        return d3.format(".0%")(d.value2/d.value);
    });
...