d3.js - d3js 线图的平滑线

Question

我目前正在研究基于刷子时间窗口选择进行更新的 d3js 图表。我遇到的问题是主图上的线条看起来断断续续。我已经更改了插值以使用不同的类型，并使用了张力属性，但我似乎无法获得流畅的线条。有人有什么想法吗？

var data = new TLSampleDataContainer()
,   keyToEntries = data.keyToEntries
,   keys = data.keyset
,   pageSize = data.pageSize;

// Visual attributes 
var tl = {
        times : data.timeEntries,       
        xTicks : function(start, end){
            var min = start.getTime()
            ,   max = end.getTime()
            ,   range;

            if(max-min <= CONSTANTS.TIME.HOURS.SCALE_FACTOR){
                var totalHours = d3.round((max-min)/3600000);
                var scale = Math.ceil(totalHours/12);
                return d3.time.hours(start, end, scale);
            }

            if(max-min <= CONSTANTS.TIME.DAYS.SCALE_FACTOR){
                var totalDays = d3.round((max-min)/86400000);
                var scale = Math.ceil(totalDays/7);
                range = d3.time.days(start, end, scale);
                return range;
            }

            if(max-min <= CONSTANTS.TIME.WEEKS.SCALE_FACTOR){
                var totalWeeks = d3.round((max-min)/(86400000 * 7));
                var scale = Math.ceil(totalWeeks/4);
                range = d3.time.weeks(start, end, scale);
                return range;

            }

            if(max-min <= CONSTANTS.TIME.MONTHS.SCALE_FACTOR){
                range = d3.time.months(start, end);
                return range;
            }

            return d3.time.years(start,end);
        },

        xTicksFormat : function(d) {
            var start = tl.xScale.domain()[0]
            ,   end = tl.xScale.domain()[1]
            ,   max = end.getTime()
            ,   min = start.getTime();

            if(max-min <= CONSTANTS.TIME.HOURS.SCALE_FACTOR) { 
                return d3.time.format('%I %p')(d);
            }

            if(max-min <= CONSTANTS.TIME.DAYS.SCALE_FACTOR) {
                return d3.time.format('%d')(d);
            }

            if(max-min <= CONSTANTS.TIME.WEEKS.SCALE_FACTOR){
                return d3.time.format('%a -week %U')(d)
            }

            if(max - min <= CONSTANTS.TIME.MONTHS.SCALE_FACTOR){
                return d3.time.format('%b')(d)
            }

            return d3.time.format('%Y')(d)          
        },

        x1Ticks: function(start, end){
            var min = start.getTime()
            ,   max = end.getTime();

            if(max-min <= CONSTANTS.TIME.HOURS.SCALE_FACTOR){
                return d3.time.days( d3.time.day.floor(start), end);
            }

            if(max-min <= CONSTANTS.TIME.DAYS.SCALE_FACTOR){
                return d3.time.weeks(d3.time.day.floor(start), end);
            }

            if(max-min <= CONSTANTS.TIME.WEEKS.SCALE_FACTOR){
                return d3.time.months(d3.time.week.floor(start), end);
            }

            if(max-min <= CONSTANTS.TIME.MONTHS.SCALE_FACTOR){
                return d3.time.years(d3.time.month.floor(start), end);
            }

            return [];
        },

        x1TicksFormat: function(d){
            var start = tl.xScale.domain()[0]
            ,   end = tl.xScale.domain()[1]
            ,   max = end.getTime()
            ,   min = start.getTime();

            if(max-min <= CONSTANTS.TIME.HOURS.SCALE_FACTOR){ 
                return d3.time.format('%a, %b %d %Y - week %U')(d);
            }

            if(max-min <= CONSTANTS.TIME.DAYS.SCALE_FACTOR){
                return d3.time.format('%a, %b %Y - week %U')(d);
            }

            if(max-min <= CONSTANTS.TIME.WEEKS.SCALE_FACTOR){
                return d3.time.format('%b %Y')(d)
            }

            return d3.time.format('%Y')(d);
        },

        drawLines: function(){
            keyToEntries.forEach(function(key, values){
                var line = d3.svg.line()
                .x(function(d){
                    return tl.xScale(d.time);    
                    })
                .y(function(d){
                    return tl.yScale(d.value);
                    })
                .interpolate("basis");

                tl.chart.append('g').attr('class', 'data ' + key)
                .append("path")
                .attr("d", line(values));
            });
        },

        //Handle Brush Event 
        onBrush: function(){
            var bext = brush.empty() ? ext2 : brush.extent();
            lc.xScale.domain(bext);
            lc.initKeys(bext);
        //  lc.yScale = d3.scale.linear().domain([0, d3.max(lc.y)]);
        //  lc.xAxis.ticks(lc.xTicks(bext[0], bext[1])).tickFormat(lc.xTicksFormat(bext[0], bext[1]));
        //  lc.chart.select('.y.axis.linechart').call(lc.yAxis)
            lc.chart.select('.axis.timescale').call(lc.xAxis);
            lc.drawLines();

        } 

    };

var lc = {
    timeScale : function(extent){
        var start = d3.min(extent)
        ,   end = d3.max(extent)
        ,   min = start.getTime()
        ,   max = end.getTime();

        if(max-min <= CONSTANTS.TIME.HOURS.SCALE_FACTOR){
            return [d3.time.hour.floor(start), d3.time.hour.ceil(end)];
        }

        if(max-min <= CONSTANTS.TIME.DAYS.SCALE_FACTOR){
          return [d3.time.day.floor(start), d3.time.day.ceil(end)];
        }

        if(max-min <= CONSTANTS.TIME.WEEKS.SCALE_FACTOR){
            return [d3.time.week.floor(start), d3.time.week.ceil(end)];
        }

        return [d3.time.month.floor(start), d3.time.month.ceil(end)];
    },
    initKeys: function(domain){
        var start = d3.min(domain)
        ,   end = d3.max(domain)
        ,   min = start.getTime()
        ,   max = end.getTime();

        lc.idsToSelectedIntervals = d3.map();
        lc.y = [];
        keyToEntries.forEach(function(key, values){
            var selectedIntervals = []
            for(var i=0; i < values.length; i++){
                var entry = values[i];
                if(entry.time.getTime() >= min && entry.time.getTime() <= max){
                    lc.y.push(entry.value);
                    selectedIntervals.push(entry);
                    lc.idsToSelectedIntervals.set(entry.id, selectedIntervals);
                }
            }    
        });
    },

    xTicks: function(start, end){
        var min = start.getTime()
        ,   max = end.getTime();

        if(max-min <= CONSTANTS.TIME.MINUTES.SCALE_FACTOR){
            totalSeconds = d3.round((max-min)/1000);
            var scale = Math.ceil(totalSeconds/10);
            return [start, end]/d3.time.seconds(start, end, totalSeconds);
        }


        if(max-min <= CONSTANTS.TIME.HOURS.SCALE_FACTOR){
            totalMinutes = d3.round((max-min)/60000);
            var scale = Math.ceil(totalMinutes/10);
            return  [start, end] //d3.time.minutes(start, end, totalMinutes);
        }

        if(max-min <= CONSTANTS.TIME.DAYS.SCALE_FACTOR){
            var totalHours = d3.round((max-min)/(3600000));
            var scale = Math.ceil(totalHours/8);
            return d3.time.hours(start, end, scale);
        }

        if(max-min <= CONSTANTS.TIME.WEEKS.SCALE_FACTOR){
            var totalDays = d3.round((max - min)/86400000);
            var scale = Math.ceil(totalDays/12);
            return d3.time.days(start, end, scale);
        }

        if(max-min <= CONSTANTS.TIME.MONTHS.SCALE_FACTOR){
            var totalWeeks = d3.round((max-min)/86400000 *7);
            var scale = Math.ceil(totalWeeks/8);
            return d3.time.weeks(start, end);
        }

        return d3.time.months(start,end, 12);
    },

    xTicksFormat: function(d){
        var min = d3.min(lc.xScale.domain())
        ,   max = d3.max(lc.xScale.domain());

        if(max-min <= CONSTANTS.TIME.HOURS.SCALE_FACTOR){ 
            return d3.time.format('%d %X %p')(d);
        }

        if(max-min <= CONSTANTS.TIME.DAYS.SCALE_FACTOR){
            return d3.time.format('%I %p')(d);
        }

        if(max-min <= CONSTANTS.TIME.WEEKS.SCALE_FACTOR){
            return d3.time.format('%d')(d);
        }

        if(max-min <= CONSTANTS.TIME.MONTHS.SCALE_FACTOR){
            return d3.time.format('week-%U')(d);
        }

        return d3.time.format('%b %y')(d)
    },

    drawLines: function(){
        var entryset = lc.idsToSelectedIntervals.entries();
        var g = lc.chart.selectAll('g.data')
            .data(entryset, function(d){return d.key;})
            .each(function(d, i){
                 d3.select(this)
                .select('path')
                .datum(d.value)
                .attr('d', lc.line);
             });

        g.enter().append('g')
            .attr('class', function(d){return "data linechart " + d.key;})
            .append('path')
            .each(function(d, i){
                 d3.select(this)
                .datum(d.value)
                .attr('d', lc.line);
            });

        g.exit().remove();
    },


    drawGrid: function(){
        //draw the Gridlines for line chart
        lc.chart.append('g').selectAll('.gridline')
            .remove()
            .data(lc.chart.selectAll('.axis.timescale line.tick')[0])
            .enter().append('line')
            .attr('x1', function(d,i){return d.parentNode.transform.baseVal.getItem(0).matrix.e;})
            .attr('x2', function(d,i){return d.parentNode.transform.baseVal.getItem(0).matrix.e;}) 
            .attr('y1', 0)
            .attr('y2', lc.height)
            .attr('class', 'gridline');

        lc.chart.append('g').selectAll('.gridline')
            .remove()
            .data(lc.chart.selectAll('.y.axis.linechart g > line.tick')[0])
            .enter().append('line')
            .attr('y1', function(d,i){return d.parentNode.transform.baseVal.getItem(0).matrix.f;})
            .attr('y2', function(d,i){return d.parentNode.transform.baseVal.getItem(0).matrix.f;}) 
            .attr('x1', 0)
            .attr('x2', width)
            .attr('class', 'gridline');

    },

    line: d3.svg.line()
            .x(function(d){
                return lc.xScale(d.time);    
                })
            .y(function(d){
                return lc.yScale(d.value);
                })
            .interpolate("basis")


};

var  drawIntervals = function(mmap, x, y){
    var i = 0;
    var offset = .5 * y(1) + 0.5;
    mmap.forEach(function(key, values){
            var line = d3.svg.line()
            .x(function(d){
                return x(d.time);    
                })
            .y(function(d){
                return y(i) + offset;
                });

            tl.chart.append('g').attr('class', "interval data " + key)
                .append("path")
                .attr("d", line(values));

            i++;
    });
}


var CONSTANTS = {
    TIME: {
        MINUTES: {NAME:"minutes", FORMAT:'%x', SCALE_FACTOR: 3600000 * 1},
        HOURS: {NAME:"hours", FORMAT:'%x', SCALE_FACTOR: 86400000 * 1},
        DAYS : {NAME:"days", FORMAT:'%d', SCALE_FACTOR: 86400000 * 5},
        WEEKS : {NAME:"weeks", format:'%b - Week %U of %y', SCALE_FACTOR: 86400000 * 28},
        MONTHS : {NAME:"months", FORMAT:'%b %Y', SCALE_FACTOR: 86400000 * 365},
        YEARS: {NAME: "years", FORMAT:'%y', SCALE_FACTOR: 86400000 * 365* 10}
    }
}


var margin = {top:20, right:15, bottom:15, left:60}
,   width = 500 - margin.left - margin.right
,   height = 325 - margin.top - margin.bottom;

tl.height = 30;
lc.height = height - tl.height - 50;

var ext = d3.extent(tl.times);
tl.xScale = d3.time.scale().domain(ext).range([0, width]);
var ext2 = tl.xScale.domain();
lc.xScale = d3.time.scale().domain(ext2).range([0, width]);
lc.initKeys(ext2);

lc.yScale = d3.scale.linear().domain([0, d3.max(lc.y)]).range([lc.height, 0]);
tl.yScale = d3.scale.linear().domain([0, d3.max(lc.y)]).range([tl.height, 0]);

var main = d3.select('#mainWrapper')
        .append('svg:svg')
        .attr('width', width +  margin.right + margin.left + 35)
        .attr('height', height + margin.top + margin.bottom)
        .attr('class', 'chart');

main.append('defs').append('clipPath')
        .attr('id','clip')
        .append('rect')
            .attr('width', width + 100)
            .attr('height', lc.height);

lc.chart = main.append('g')
                .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
                .attr('width', width)
                .attr('height', lc.height)
                .attr('class', 'linechart');                    



tl.chart = main.append('g')
        .attr('transform', 'translate('+ margin.left + ',' + (lc.height + 60) + ')')
        .attr('width', width)
        .attr('height', tl.height)
        .attr('class', 'mini');

//var draw Timeline xaxis
tl.xAxis = d3.svg.axis()
    .scale(tl.xScale)
    .orient('bottom')
    .ticks(tl.xTicks)
    .tickFormat(tl.xTicksFormat)
    .tickSize(6, 0, 0);

tl.x1Axis =  d3.svg.axis()
    .scale(tl.xScale)
    .orient('top')
    .ticks(tl.x1Ticks)
    .tickFormat(tl.x1TicksFormat)
    .tickSize(15, 0, 0);

lc.xAxis = d3.svg.axis()
    .scale(lc.xScale)
    .orient('bottom')
    .ticks(lc.xTicks)
    .tickFormat(lc.xTicksFormat)
    .tickSize(6,0,0);

lc.yAxis = d3.svg.axis()
    .scale(lc.yScale)
    .orient('left')
    .tickSubdivide(true)
    .tickSize(6,0,0);

tl.yAxis = d3.svg.axis()
    .scale(tl.yScale)
    .orient('left')
    .tickValues([tl.yScale.domain()[0], tl.yScale.domain()[1]])
    .tickSize(6,0,6);

lc.chart.append('g')
    .attr('transform', 'translate(-15, 0)')
    .attr('class', 'y axis linechart')
    .call(lc.yAxis);

lc.chart.append('g')
    .attr('transform', 'translate(0,' + lc.height + ')')
    .attr('class', 'axis timescale')
    .call(lc.xAxis);


tl.chart.append('g')
    .attr('transform', 'translate(0,' + tl.height + ')')
    .attr('class', 'axis date')
    .call(tl.xAxis);

tl.chart.append('g')
    .attr('transform', 'translate(0,0.5)')
    .attr('class', 'axis month')
    .call(tl.x1Axis)
    .selectAll('text')
        .attr('dx', 5)
        .attr('dy', 12);

tl.chart.append('g')
    .attr('transform', 'translate(-15, 0)')
    .attr('class', 'y axis timeline')
    .call(tl.yAxis);

//Draw Grids
lc.drawGrid();

//Initialize brush to handle events
var brush = d3.svg.brush()
    .x(tl.xScale)
    .extent(tl.xScale.domain())
    .on("brush", tl.onBrush);

tl.chart.append('g')
    .attr('class', 'x brush')
    .call(brush)
    .selectAll('rect')
        .attr('y', 1)
        .attr('height', tl.height - 1);

// draw the path for each key on the line chart.
lc.drawLines(); 
tl.drawLines(); 

fiddle 链接:http://jsfiddle.net/rbrooks/NFKkV/1/

Answer 1

在 CSS 中，您将 shape-rendering: crispEdges 应用于整个图表，这会禁用其中所有内容的抗锯齿功能，包括路径。您很可能只想禁用图表轴的抗锯齿功能，因此您应该使规则更具选择性。即:

.chart .axis {
  shape-rendering: crispEdges
}