交互式数据可视化－D3.js（四）形状生成器

crossea 发布于2019-08-23 12:44 / 1329人阅读

摘要：形状生成器线段生成器使用默认的设置构造一个生成器。如果指定了则将访问器设置为指定的函数或数值并返回当前生成器。

形状生成器 线段生成器

var linePath = d3.line() - 使用默认的设置构造一个 line 生成器。

linePath.x() - 如果指定了 x 则将 x 访问器设置为指定的函数或数值并返回当前 line 生成器。如果没有指定 x 则返回当前 x 访问器，默认为:

function x(d) {
    return d[0];
}

linePath.y() - 如果指定了 y 则将 y 访问器设置为指定的函数或数值并返回当前 line 生成器。如果没有指定 y 则返回当前 y 访问器，默认为:

function y(d) {
    return d[1];
}

linePath.curve() - 如果指定了 curve 则表示设置当前的曲线插值方法并返回线条生成器。

使用方法如下：

var lines = [[80, 80], [200, 100], [200, 200], [100, 200]]
var linePath = d3.line().curve(d3.curveCatmullRom.alpha(0.5));
var drawLine = d3.select("#line").append("svg").attr("width", 400).attr("height", 300);
drawLine.append("path").attr("d", linePath(lines)).attr("stroke", "black").attr("stroke-width", "3").attr("fill", "none");

区域生成器

在需要生产折线或曲线下方面积的时候，使用区域生成器, 数据访问器有x(), x0(), x1(), y(), y0(), y1()六个，不需要全部使用,其他方法与线段生成器基本类似，使用方法如下:

var areas = [80, 120, 130, 70, 60, 90]
var dragArea = d3.area();=
dragArea.x(function(d, i){
    return 20 + i * 30;
 })

dragArea.y0(function(d, i){
    return 400 / 2;
})

dragArea.y1(function(d, i){
    return 400 / 2 - d;
})
dragArea.curve(d3.curveCatmullRom.alpha(0.5))
var drawLine = d3.select("#line").append("svg").attr("width", 400).attr("height", 300);
drawLine.append("path").attr("d", dragArea(areas)).attr("stroke", "black").attr("stroke-width", "3").attr("fill", "#f0f");

弧生成器

弧生成器可凭借起始角度，终止角度，内半径，外半径等，生产弧线的路径，因此在制作饼状图，弦图等图表的时候很常用。常用方法有：

var arc = d3.arc() - 设置弧生成器

arc.innerRadius(80); - 设置环的内半径

arc.startAngle(0) - 设置起始角度

arc.endAngle(Math.PI) - 设置终止角度

arc.cornerRadius(10) - 设置拐角半径

大致的使用方法：

var arc=d3.arc().innerRadius(80)outerRadius(100).startAngle(0).endAngle(Math.PI);
var drawLine = d3.select("#line").append("svg").attr("width", 400).attr("height", 300);
drawLine.append("path")
    .attr("d", arc())
    .attr("stroke", "black")
    .attr("stroke-width", "3")
   .attr("fill", "#f0f")
   .attr("transform", "translate(200, 150)");

弦生成器

弦生成器根据两段弧来绘制，需要以下几个方法：

var chord = d3.ribbon() - 设置弦生成器

chord.source() - 设置起始弧度

chord.target() - 设置终止弧

chord.radius() - 设置弧半径

chord.startAngle() - 设置弧的起始角度

chord.endAngle() - 设置弧的终止角度

如果使用默认访问器，生成弦图，其数据格式为：

 {
    source: {
        startAngle: 0.2,
        endAngle: Math.PI * 0.3,
        radius: 100
    },
    target: {
        startAngle : Math.PI * 1,
        endAngle: Math.PI * 1.6,
        radius: 100
    }
}

也可以更改方法，使用自定义的数据：

var data = {
    a: {
        a1: 0.2,
        a2: Math.PI * 0.3,
    },
    b: {
        a1 : Math.PI * 1,
        a2: Math.PI * 1.6,
    }
}

var chord = d3.ribbon();
chord.source(function(d){
    return d.a
})
chord.target(function(d){
    return d.b
})
chord.radius(100);
chord.startAngle(function(d){
    return d.a1
})
chord.endAngle(function(d){
    return d.a2
})

云服务器 GPU云服务器 d3.js数据可视化实战大数据可视化 d3.js d3.js数据可视化实战手册交互式数据可视化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98976.html

交互式数据可视化－D3.js（四）形状生成器

摘要：形状生成器线段生成器使用默认的设置构造一个生成器。如果指定了则将访问器设置为指定的函数或数值并返回当前生成器。形状生成器线段生成器 var linePath = d3.line() - 使用默认的设置构造一个 line 生成器。 linePath.x() - 如果指定了 x 则将 x 访问器设置为指定的函数或数值并返回当前 line 生成器。如果没有指定 x 则返回当前 x 访问器...

Terry_Tai 2019-08-02 11:54 评论0 收藏0
交互式数据可视化－D3.js（一）

摘要：如其中，和表示绘制区域的宽高，表示版本号。下面分别是绘制一个多边形和折线路径标签功能最丰富，以上图形都可以使用路径制作出来，用法与折线类似给出一个坐标点在坐标前添加一个英文字母，表示如何运动到此坐标点点。英文字符按照功能分为五类。在D3中会穿插SVG 方便大家对D3对使用 SVG简介可缩放矢量图(scalabel vector graphics)，是用于描述二维矢量图形的一种图形格...

MASAILA 2019-08-20 10:39 评论0 收藏0
使用JavaScript和D3.js实现数据可视化

摘要：它的全称是数据驱动文档，并且它被称为一个互动和动态的数据可视化库网络。我们将使用文本编辑器和浏览器。出于测试目的，建议使用工具来检查和调试和，例如或。使矩形反映数据目前，我们阵列中的所有矩形沿轴具有相同的位置，并且不代表高度方面的数据。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由独木桥先生发表于云+社区专栏介绍 D3.js是一个JavaScript库。它的...

mingde 2019-08-23 10:56 评论0 收藏0
声明式与响应式——前端新一代数据可视化方案

摘要：数据可视化图表图表作为数据可视化最常见的表现形式之一，往往被以偏概全的认为图表就是数据可视化。严格来说，数据可视化应该是连接数据与视觉的一个映射关系，将数据映射成人更容易感知其规律的可视化结果。题目中的新一代是个相对的概念，事实上本文即将介绍的方法已经有了生产环境可用的实现方案（这也侧面佐证了其可行性），但考虑到此方法与现在大部分前端项目中所使用的数据可视化方案相比仍有一些优势，因此...

xuhong 2019-08-20 12:34 评论0 收藏0
常用的数据可视化工具

摘要：俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。是一个地图库，主要面向数据可视化用户。俗话说，不会使用工具来完成任务的都是进化不完全的表现，大数据时代，可视化已经深深钻进我们的生活，使用可视化工具也变的相当普遍，今天我们来总结下当下可视化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 评论0 收藏0