d3.js - d3js 线图的平滑线-6ren

d3.js - d3js 线图的平滑线

转载作者：行者123 更新时间：2023-12-01 11:05:05

我目前正在研究基于刷子时间窗口选择进行更新的 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/

最佳答案

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

.chart .axis {
  shape-rendering: crispEdges
}

关于d3.js - d3js 线图的平滑线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15911554/

文章推荐： assembly - 基本 FPU 指令/堆栈概述？

文章推荐： .net - Regasm - 无法找到输入程序集

文章推荐： oop - 最佳实践 : A child node's knowledge about its parent

文章推荐： java - Android - onActivityResult 忽略存储的字节

css - 如何在CSS中用一种颜色绘制一半对 Angular 线，用另一种颜色绘制另一半对 Angular 线
我将 Bootstrap 与 css 和 java 脚本结合使用。在不影响前端代码的情况下，我真的很难在css中绘制这个背景。在许多问题中，人们将宽度和高度设置为 0%。但是由于我的导航栏，我不能使用
c - scanf ("%79[^\n]",line); 之间的区别vs scanf ("%79[^\n]\n"，线) vs scanf ("%79[^\n]s"，线)
我正在用 c 编写一个程序来读取文件的内容。代码如下: #include void main() { char line[90]; while(scanf("%79[^\
Javascript获取矩阵数组的对 Angular 线
我想使用 javascript 获取矩阵数组的所有对 Angular 线。假设输入输出如下: input = [ [1,2,3], [4,5,6], [7,8,9], ] output =
pdfmake - 线，圆和其他形状？
可以用pdfmake绘制lines，circles和other shapes吗？如果是，是否有documentation或样本？我想用jsPDF替换pdfmake。最佳答案是的，有可能。 pdfm
svg - 如何制作带有边框的SVG“线”？
我有一个小svg小部件，其目的是显示角度列表（参见图片）。现在，角度是线元素，仅具有笔触，没有填充。但是现在我想使用一种“内部填充”颜色和一种“笔触/边框”颜色。我猜想line元素不能解决这个问题，
java - 线-三角形交点检查返回错误的交点
我正在为带有三角对象的 3D 场景编写一个非常基本的光线转换器，一切都工作正常，直到我决定尝试从场景原点 (0/0/0) 以外的点转换光线。但是，当我将光线原点更改为 (0/1/0) 时，相交测试突
Python Shebang 线
这个问题已经有答案了: Why do people write "#!/usr/bin/env python" on the first line of a Python script? (22 个回
java - 如何在屏幕上绘制星号(*)线？
如何使用大约 50 个星号 * 并使用 for 循环绘制一条水平线？当我尝试这样做时，结果是垂直(而不是水平)列出 50 个星号。 public void drawAstline() { f
java - 球不动；线？
这是一个让球以对角线方式下降的 UI，但球保持静止；线程似乎无法正常工作。你能告诉我如何让球移动吗？请下载一个球并更改目录，以便程序可以找到您的球的分配位置。没有必要下载足球场，但如果您愿意，也可以
ant - Jmeter和Ant报90%线
我在我的一个项目中使用 Jmeter 和 Ant，当我们生成报告时，它会在报告中显示 URL、#Samples、失败、成功率、平均时间、最短时间、最长时间。我也想在报告中包含 90% 的时间线。现
Java Swing 线
我有一个不寻常的问题，希望有人能帮助我。我想用 Canvas (android) 画一条 Swing 或波浪线，但我不知道该怎么做。它将成为蝌蚪的尾部，所以理想情况下我希望它的形状更像三角形，一端更大
javafx粗笔画路径(线)与圆之间的碰撞问题
这个问题已经有答案了: Checking Collision of Shapes with JavaFX (1 个回答) 已关闭 8 年前。我正在使用 JavaFx 8 库。我的任务很简单:我想检
bash - 如何按编号的百分比拆分文件。线？
如何按编号的百分比拆分文件。行数？假设我想将我的文件分成 3 个部分(60%/20%/20% 部分)，我可以手动执行此操作，-_-: $ wc -l brown.txt 57339 brown.tx
圆圈之间的 HTML 线
我正在努力实现这样的目标: 但这就是我设法做到的。你能帮我实现预期的结果吗？更新: 如果我删除 bootstrap.css 依赖项，问题就会消失。我怎样才能让它与 Bootstrap 一起工作？
css - 转换比例导致间隙/线
我目前正在构建一个网站，但遇到了 transform: scale 的问题。我有一个按钮，当用户将鼠标悬停在它上面时，会发生两件事: 背景以对 Angular 线“扫过” 按钮标签颜色改变按钮稍微变
macos - 非常快速地绘制图形(线)
我需要使用直线和仿射变换绘制大量数据点的图形(缩放图形以适合 View )。目前，我正在使用 NSBezierPath，但我认为它效率很低(因为点在绘制之前被复制到贝塞尔路径)。通过将我的数据切割成
image - 从车牌上删除多余的像素/线
我正在使用基于 SVM 分类的 HOG 特征检测器。我可以成功提取车牌，但提取的车牌除了车牌号外还有一些不必要的像素/线。我的图像处理流程如下: 在灰度图像上应用 HOG 检测器裁剪检测到的区域调
python - 间隙填充轮廓/线
我有以下图片: 我想填充它的轮廓(即我想在这张图片中填充线条)。我尝试了形态学闭合，但使用大小为 3x3 的矩形内核和 10 迭代并没有填满整个边界。我还尝试了一个 21x21 内核和 1 迭代，但
algorithm - 统计两组序列的交点(线)
我必须找到一种算法，可以找到两组数组之间的交集总数，而其中一个数组已排序。举个例子，我们有这两个数组，我们向相应的数字画直线。这两个数组为我们提供了总共 7 个交集。有什么样的算法可以帮助我解决
c++ - 如何从带有透视投影的近裁剪平面绘制射线/线？
简单地说 - 我想使用透视投影从近裁剪平面绘制一条射线/线到远裁剪平面。我有我认为是使用各种 OpenGL/图形编程指南中描述的方法通过单击鼠标生成的正确标准化的世界坐标。我遇到的问题是我的光线似乎

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

d3.js - d3js 线图的平滑线