Javascript d3.js象形图

我正在开发一个象形图应用程序

这是我的最新代码。我将尝试在矩形块的顶部放置一个纹理层。有没有办法控制各个轴的填充

var pictogramData = [
        {
            "label": "8",
            "value": 8
        },
        {
            "label": "9",
            "value": 4
        },
        {
            "label": "10",
            "value": 9
        },
        {
            "label": "11",
            "value": 12
        }    
    ];


var margins = {
    top: 0,
    left: 30,
    right: 24,
    bottom: 0
};

var chart,
    width = 300,
    pixelGap = 2,
    bar_height = 15,
    height = ((bar_height + pixelGap) * pictogramData.length),
    gapHeights = (pixelGap) * pictogramData.length;



svg = d3.select("#step-1") 
  .append('svg');


svg
  .append('defs')
  .append('pattern')
    .attr('id', 'diagonalHatch')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 4)
    .attr('height', 4)
  .append('path')
    .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
    .attr('stroke', '#000000')
    .attr('stroke-width', 1);


chartWidth =  width * 0.8;

chart = svg.append('g')
  .attr('class', 'chart')
  .attr('width', chartWidth)
  .attr('height', height+gapHeights)
  .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');


valueList = svg.append('g')
    .attr('class', 'axis')
 .attr('width', width *0.2)
.attr('transform', 'translate(' + (width - margins.right) + ',' + margins.top + ')')


chart
.append('g')

var x, y;

var max = d3.max(pictogramData, function(d) { return +d.value;} );

    function getValueDomain(data){
        var valueDomain = new Array();

        for (i = 0; i < data.length; ++i) {
            valueDomain.push(data[i].value);
        }
        return valueDomain;
    }

var valueArray = getValueDomain(pictogramData);

x = d3.scale.linear()
    .domain([0, max])
    .range([0, chartWidth]);

y = d3.scale.ordinal()
   .domain(valueArray)
   .rangeBands([0, height]);

    function plotRectangleGroups(groupName, pictogramData, chartWidth){
            //Add a group to hold the rects
            var group = chart.append("g")
                .attr("class", groupName+"group");

            group.selectAll("rect")
                .data(pictogramData)
                .enter().append("rect")
                .attr("x", 0)
                .attr("y", function(d, i){
                    return y(d.value) + (pixelGap*i);
                })
                .attr("width", function(d, i){
                    var barWidth = chartWidth;
                    if(
                        groupName != "base" &&
                        groupName != "pattern"
                      ){
                       barWidth = x(d.value);                     
                    }                    
                    return barWidth;
                })
                .attr("height", y.rangeBand())
            .attr('fill', function(){
                var fill;
                if(groupName == "pattern"){
                    fill = 'url(#diagonalHatch)';
                }

                return fill;
            });        


    }

plotRectangleGroups("base", pictogramData, chartWidth);
plotRectangleGroups("rects", pictogramData, chartWidth);
plotRectangleGroups("pattern", pictogramData, chartWidth);

//left labels
labels = pictogramData.map(function (d) {
    return d.label;
});

yScale = d3.scale.ordinal()
        .domain(labels)
        .rangeRoundBands([0, height]),    

yAxis = d3.svg.axis()
    .scale(yScale)
    .orient('left'),    

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



//right labels
values = pictogramData.map(function (d) {
    return d.value;
});

yScale = d3.scale.ordinal()
        .domain(values)
        .rangeRoundBands([0, height]),    

yAxis = d3.svg.axis()
    .scale(yScale)
    .orient('right'),    


valueList
    .call(yAxis);

var象形图数据=[
{
“标签”：“8”，
“价值”：8
},
{
“标签”：“9”，
“价值”：4
},
{
“标签”：“10”，
“价值”：9
},
{
“标签”：“11”，
“价值”：12
}    
];
var保证金={
排名：0，
左:30,，
右：24，
底部：0
};
var图，
宽度=300，
像素间距=2，
钢筋高度=15，
高度=（（条形图高度+像素间距）*象形图数据.length），
gapHeights=（像素间距）*象形图数据.length；
svg=d3。选择（“步骤1”）
.append（'svg'）；
svg
.append（'defs'））
.append（'模式'）
.attr（'id'，'diagonalHatch'）
.attr（'patternUnits'，'userSpaceOnUse'）
.attr（'width'，4）
.attr（'height'，4）
.append（'路径'）
.attr（'d'，'M-1,1 l2，-2 M0,4 l4，-4 M3,5 l2，-2'）
.attr（'stroke'，'000000'）
.attr（“笔划宽度”，1）；
图表宽度=宽度*0.8；
chart=svg.append（'g'）
.attr（'类'，'图表'）
.attr（'宽度'，图表宽度）
.attr（'height'，height+gapHeights）
.attr（'transform'，'translate（'+margins.left+'，'+margins.top+'））；
valueList=svg.append（'g'）
.attr（'类'，'轴'）
.attr（'width'，width*0.2）
.attr（'transform'，'translate（+（width-margins.right）+'，'+margins.top++'））
图表
.append（'g'）
变量x，y；
var max=d3.max（象形图数据，函数（d）{return+d.value；}）；
函数getValueDomain（数据）{
var valueDomain=新数组（）；
对于（i=0；i

---

Y轴上条形图和记号标签的未对齐来自

像素间隙值

pixelGap = 1,
...
.attr("y", function(d, i){
  return y(d.value) + (pixelGap*i);
})

正如您所见，
pixelgap
用于在条之间添加一点空白，但您（或创建图表的人）忘记了在该范围内对其进行补偿。
pixelGap*i
意味着每一个下一个条都会向下推一点，而相应的标签不会向下推

最简单的修复方法是删除乘法并修改
y
和
height
属性：

        group.selectAll("rect")
            .data(pictogramData)
            .enter().append("rect")
            .attr("x", 0)
            .attr("y", function(d, i){
                return y(d.value) + pixelGap;
            })
            .attr("width", function(d, i){
                var barWidth = chartWidth;
                if(
                    groupName != "base" &&
                    groupName != "pattern"
                  ){
                   barWidth = x(d.value);                     
                }                    
                return barWidth;
            })
            .attr("height", y.rangeBand() - pixelGap)

通过此更改，垂直填充基本上均匀地分布在条的上方和下方，从而消除错位。
填充由
边距
变量控制。尝试将
left:30
减小到一个较低的值，您将看到每个条从更左边开始。我指的是轴的线高度，如何确保它与条对齐更好？