Блог

Главная - Вопросы по программированию - почему нет пробелов между столбцами D3 js

почему нет пробелов между столбцами D3 js

#javascript #d3.js

#javascript #d3.js

Вопрос:

Я изучаю d3 js. Я нашел отличную книгу о библиотеке. Но мне нужно было перевести примеры кода с версии 3 на 4. Вот мой код для версии 4

 <body>
        <script type="text/javascript">
            var width = 800;
            var height = 500;            
            var dataset  = [];                    

            dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                           11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];


            var xScale = d3.scaleBand()
                            .domain(d3.range(dataset.length))
                            .rangeRound([0, width], 0.5);

            var yScale = d3.scaleLinear()
                            .domain([0, d3.max(dataset)])
                            .range([0, height]);

            var svg = d3.select("body")
                        .append("svg")
                        .attr("width",width)
                        .attr("height",height);            

            svg.selectAll("rect")
                .data(dataset)
                .enter()
                .append("rect")               
                .attr("x", function(d, i){return xScale(i);})
                .attr("y", function(d){return height- yScale(d);})
                .attr("width", xScale.bandwidth())
                .attr("height", function(d){return yScale(d);})
                .attr("fill",  function(d){return "rgb(0,0," d*10 ")";});

            svg.selectAll("text")
                .data(dataset)
                .enter()
                .append("text")      
                .text(function(d){return d;})     
                .attr("text-anchor", "middle")             
                .attr("x", function(d, i){return xScale(i)   xScale.bandwidth() / 2;})
                .attr("y", function(d){return height - yScale(d)   14;})                
                .attr("fill", "white");             

        </script>
    </body>

Вот результат введите описание изображения здесь

Как я понимаю, это

      .rangeRound([0, width], 0.5);

должно привести к некоторым пробелам между столбцами. Но я не знаю почему — пробелов нет!
Что я делаю не так?

Ответ №1:

Я считаю, что новый шаблон в d3 v4 будет —

 var xScale = d3.scaleBand()
      .domain(d3.range(dataset.length))
      .rangeRound([0, width])
      .paddingInner(0.05);

Комментарии:

1. в чем разница между padding и paddingInner? Потому что с заполнением это тоже хорошо работает..

2. Взгляните на эту ссылку — внутреннее заполнение позволяет избежать добавления отступов к первому и последнему элементам, чтобы они были хорошо выровнены — npmjs.com/package/d3-scale#band-scales — отступ добавляет расстояние как к внутреннему, так и к внешнему.