D3.js 自定义对角线背景纹理_D3.js

D3.js 自定义对角线背景纹理

d3.js

D3.js 自定义对角线背景纹理,d3.js,D3.js,我试图在图表的蓝色矩形后面创建一个背景纹理矩形块。我需要创建一个图案块，并将其应用于灰色矩形的填充我现在有一个实心块但是需要添加这样的纹理我必须创建这个def <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="diagonal-stripe-1" patternUnits="userSpaceOnUse" w

我试图在图表的蓝色矩形后面创建一个背景纹理矩形块。我需要创建一个图案块，并将其应用于灰色矩形的填充

我现在有一个实心块

但是需要添加这样的纹理

我必须创建这个def

<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="diagonal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>



var itemRects2 = main.append('g').attr('clip-path', 'url(#clip)');
var itemRects = main.append('g').attr('clip-path', 'url(#clip)');

var currentLine = main
    .append('line')
    .attr('class', 'currentLine')
    .attr('clip-path', 'url(#clip)');

var brush = d3
    .brushX()
    .extent([
        [0, 0],
        [w, miniHeight],
    ])
    .on('brush', brushed);

mini.append('g')
    .attr('class', 'x brush')
    .call(brush)
    .call(brush.move, x1.range());

function getXAxisTop(tTick, tFormat) {
    return d3
        .axisBottom(xTop)
        .ticks(d3[tTick])
        .tickFormat(d => d3.timeFormat(tFormat)(d));
}

function toDays(d) {
    d = d || 0;
    return d / 24 / 60 / 60 / 1000;
}

function toUTC(d) {
    if (!d || !d.getFullYear) return 0;
    return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate());
}

function daysBetween(d1, d2) {
    return toDays(toUTC(d2) - toUTC(d1));
}

function drawBrush(minExtent, maxExtent) {
    var visItems = items.filter(function(d) {
        return d.starting_time < maxExtent && d.ending_time > minExtent;
    });



    var days = daysBetween(minExtent, maxExtent);

    console.log('days', days);

    /*
    function timeFormat(formats) {
        return function(date) {
            var i = formats.length - 1, f = formats[i];
            while (!f[1](date)) f = formats[--i];
            return d3.functor(f[0])(date);
        };
    }*/

    /*
    var customTimeFormat = timeFormat([
        ["00:00", function () { return true; }],
        ["06:00", function (d) { return 3 <= d.getHours() && d.getHours() < 9; }],
        ["12:00", function (d) { return 9 <= d.getHours() && d.getHours() < 15; }],
        ["18:00", function (d) { return 15 <= d.getHours() && d.getHours() < 21; }]
    ]);
    */

    var tFormat1 = '%Y-%m';
    var tTick1 = 'timeMonth';

    //var tFormat2 = '%H%M';
    //var tTick2 = 'timeHour';

    if (days < 40) {
        tFormat1 = '%Y-%m-%d';
        tTick1 = 'timeWeek';
    }

    if (days <= 7) {
        tFormat1 = '%Y-%m-%d';
        tTick1 = 'timeDay';
    }

    if (days <= 1) {
        tFormat1 = '%H%M';
        tTick1 = 'timeHour';

        //tFormat2 = '%H%M';
        //tTick2 = customTimeFormat;
        //console.log("CUSTOM FORMAT", customTimeFormat)
    }

    var toolTipDateFormat = d3.timeFormat('%Y-%m');

    x1.domain([minExtent, maxExtent]);
    xTop.domain([minExtent, maxExtent]);
    gXTop.call(getXAxisTop(tTick1, tFormat1));
    gXTop.selectAll('.tick text');

    //gXTop2.call(getXAxisTop(tTick2, tFormat2));
    //gXTop2.selectAll('.tick text');

    currentLine
        .attr('x1', x1(now))
        .attr('x2', x1(now))
        .attr('y1', 0)
        .attr('y2', mainHeight);


    //update main item rects
    var rects = itemRects
        .selectAll('rect')
        .data(visItems, function(d) {
            return d.id;
        })
        .attr('x', function(d) {
            return x1(d.starting_time);
        })
        .attr('width', function(d) {
            return x1(d.ending_time) - x1(d.starting_time);
        });

    rects
        .enter()
        .append('rect')
        .attr('class', function(d) {
            return 'miniItem';
        })
        .attr('x', function(d) {
            return x1(d.starting_time);
        })
        .attr('y', function(d) {
            return y1(d.lane + gutter);
        })
        .attr('width', function(d) {
            return x1(d.ending_time) - x1(d.starting_time);
        })
        .attr('height', function(d) {
            return y1(1 - 2 * gutter);
        })
        .on('mouseover', function(d) {
            tooltipTimeline
                .transition()
                .duration(200)
                .style('opacity', 0.9);
            tooltipTimeline
                .html(
                    'Start Time ' +
                        toolTipDateFormat(d.starting_time) +
                        '<br>' +
                        'End Time ' +
                        toolTipDateFormat(d.ending_time),
                )
                .style('left', d3.event.pageX + 'px')
                .style('top', d3.event.pageY - 28 + 'px');
        })
        .on('mouseout', function(d) {
            tooltipTimeline
                .transition()
                .duration(500)
                .style('opacity', 0);
        });

    rects.exit().remove();



    //textured blocks
    console.log("w", w);

    //update main item rects
    var backRects = itemRects2
        .selectAll('rect')
        .data(visItems, function(d) {
            return d.id;
        })
        .attr('x', function(d) {
            return 0;
        })
        .attr('width', function(d) {
            return w;
        })
        .attr('fill', function(d) {
            return "grey";
        });


    backRects
        .enter()
        .append('rect')
        .attr('class', function(d) {
            return 'miniItem2';
        })
        .attr('x', function(d) {
            return 0;
        })
        .attr('y', function(d) {
            return y1(d.lane + gutter);
        })
        .attr('width', function(d) {
            return w;
        })
        .attr('height', function(d) {
            return y1(1 - 2 * gutter);
        })
        .attr('fill', function(d) {
            return "grey";
        });

   // backRects.exit().remove();

    //textured block


}

但是我如何使它更接近设计——定制图像

<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="diagonal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>



var itemRects2 = main.append('g').attr('clip-path', 'url(#clip)');
var itemRects = main.append('g').attr('clip-path', 'url(#clip)');

var currentLine = main
    .append('line')
    .attr('class', 'currentLine')
    .attr('clip-path', 'url(#clip)');

var brush = d3
    .brushX()
    .extent([
        [0, 0],
        [w, miniHeight],
    ])
    .on('brush', brushed);

mini.append('g')
    .attr('class', 'x brush')
    .call(brush)
    .call(brush.move, x1.range());

function getXAxisTop(tTick, tFormat) {
    return d3
        .axisBottom(xTop)
        .ticks(d3[tTick])
        .tickFormat(d => d3.timeFormat(tFormat)(d));
}

function toDays(d) {
    d = d || 0;
    return d / 24 / 60 / 60 / 1000;
}

function toUTC(d) {
    if (!d || !d.getFullYear) return 0;
    return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate());
}

function daysBetween(d1, d2) {
    return toDays(toUTC(d2) - toUTC(d1));
}

function drawBrush(minExtent, maxExtent) {
    var visItems = items.filter(function(d) {
        return d.starting_time < maxExtent && d.ending_time > minExtent;
    });



    var days = daysBetween(minExtent, maxExtent);

    console.log('days', days);

    /*
    function timeFormat(formats) {
        return function(date) {
            var i = formats.length - 1, f = formats[i];
            while (!f[1](date)) f = formats[--i];
            return d3.functor(f[0])(date);
        };
    }*/

    /*
    var customTimeFormat = timeFormat([
        ["00:00", function () { return true; }],
        ["06:00", function (d) { return 3 <= d.getHours() && d.getHours() < 9; }],
        ["12:00", function (d) { return 9 <= d.getHours() && d.getHours() < 15; }],
        ["18:00", function (d) { return 15 <= d.getHours() && d.getHours() < 21; }]
    ]);
    */

    var tFormat1 = '%Y-%m';
    var tTick1 = 'timeMonth';

    //var tFormat2 = '%H%M';
    //var tTick2 = 'timeHour';

    if (days < 40) {
        tFormat1 = '%Y-%m-%d';
        tTick1 = 'timeWeek';
    }

    if (days <= 7) {
        tFormat1 = '%Y-%m-%d';
        tTick1 = 'timeDay';
    }

    if (days <= 1) {
        tFormat1 = '%H%M';
        tTick1 = 'timeHour';

        //tFormat2 = '%H%M';
        //tTick2 = customTimeFormat;
        //console.log("CUSTOM FORMAT", customTimeFormat)
    }

    var toolTipDateFormat = d3.timeFormat('%Y-%m');

    x1.domain([minExtent, maxExtent]);
    xTop.domain([minExtent, maxExtent]);
    gXTop.call(getXAxisTop(tTick1, tFormat1));
    gXTop.selectAll('.tick text');

    //gXTop2.call(getXAxisTop(tTick2, tFormat2));
    //gXTop2.selectAll('.tick text');

    currentLine
        .attr('x1', x1(now))
        .attr('x2', x1(now))
        .attr('y1', 0)
        .attr('y2', mainHeight);


    //update main item rects
    var rects = itemRects
        .selectAll('rect')
        .data(visItems, function(d) {
            return d.id;
        })
        .attr('x', function(d) {
            return x1(d.starting_time);
        })
        .attr('width', function(d) {
            return x1(d.ending_time) - x1(d.starting_time);
        });

    rects
        .enter()
        .append('rect')
        .attr('class', function(d) {
            return 'miniItem';
        })
        .attr('x', function(d) {
            return x1(d.starting_time);
        })
        .attr('y', function(d) {
            return y1(d.lane + gutter);
        })
        .attr('width', function(d) {
            return x1(d.ending_time) - x1(d.starting_time);
        })
        .attr('height', function(d) {
            return y1(1 - 2 * gutter);
        })
        .on('mouseover', function(d) {
            tooltipTimeline
                .transition()
                .duration(200)
                .style('opacity', 0.9);
            tooltipTimeline
                .html(
                    'Start Time ' +
                        toolTipDateFormat(d.starting_time) +
                        '<br>' +
                        'End Time ' +
                        toolTipDateFormat(d.ending_time),
                )
                .style('left', d3.event.pageX + 'px')
                .style('top', d3.event.pageY - 28 + 'px');
        })
        .on('mouseout', function(d) {
            tooltipTimeline
                .transition()
                .duration(500)
                .style('opacity', 0);
        });

    rects.exit().remove();



    //textured blocks
    console.log("w", w);

    //update main item rects
    var backRects = itemRects2
        .selectAll('rect')
        .data(visItems, function(d) {
            return d.id;
        })
        .attr('x', function(d) {
            return 0;
        })
        .attr('width', function(d) {
            return w;
        })
        .attr('fill', function(d) {
            return "grey";
        });


    backRects
        .enter()
        .append('rect')
        .attr('class', function(d) {
            return 'miniItem2';
        })
        .attr('x', function(d) {
            return 0;
        })
        .attr('y', function(d) {
            return y1(d.lane + gutter);
        })
        .attr('width', function(d) {
            return w;
        })
        .attr('height', function(d) {
            return y1(1 - 2 * gutter);
        })
        .attr('fill', function(d) {
            return "grey";
        });

   // backRects.exit().remove();

    //textured block


}

chart.append("defs").append("pattern")
    .attr('id','diagonal-stripe-1')
    .attr("width", 10)
    .attr("height", 10)
    .attr('patternUnits',"userSpaceOnUse")
    .append('image')
    .attr('xlink:href','data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg==')
    .attr('x',0)
    .attr('y',0)
    .attr("width", 10)
    .attr("height", 10);

    //update main item rects
    var backRects = itemRects2
        .selectAll('rect')
        .data(visItems, function(d) {
            return d.id;
        })
        .attr('x', function(d) {
            return 0;
        })
        .attr('width', function(d) {
            return w;
        })
        .attr('fill', function(d) {
            //return "grey";//'diagonal-stripe-1'
            return  "url(#diagonal-stripe-1)";
        });