d3.js——使用svg

hqman 发布于2019-08-23 16:19 / 2776人阅读

摘要：相比元素，使用可以绘制出更多的图形，此文尝试将与结合由于我也是第一次使用，所以主要根据此篇的顺序来静态使用手打元素用于组合对象的容器，添加到元素上的变换会应用到所有子元素上与就没啥好讲了同时，在中有一个容易混淆的点哪些样式一定要写在属性

相比HTML元素，使用SVG可以绘制出更多的图形，此文尝试将d3.js与SVG结合
由于我也是第一次使用SVG，所以主要根据此篇blog的顺序来Let’s Make a Bar Chart, II

静态SVG使用

手打SVG

g元素：用于组合对象的容器，添加到g元素上的变换会应用到所有子元素上
rect与text就没啥好讲了
同时，在SVG中有一个容易混淆的点：哪些样式一定要写在属性之中（比如rect的width），哪些样式可以通过style表现（如fill，当然他们也可以写在属性之中，但不知道为什么优先级低于class给予的样式）。一个比较好记的方法就是：形状几何（如rect的width）要写在属性之中，修饰类的（如fill）可通过style表现

d3生成SVG

先贴代码，CSS不变

    let data = [4, 8, 15, 16, 23, 42];
    let width = 420,
        barHeight = 20;
    let x = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([0, width]);
    let chart = d3.select(".chart")
        .attr("width", width)
        .attr("height", barHeight * data.length);
    let bar = chart.selectAll("g")  //数据绑定在g上
        .data(data)
        .enter().append("g")
        .attr("transform", (d, i) => { return "translate(0," + i * barHeight + ")"});
    bar.append("rect")
        .attr("width", d => x(d))
        .attr("height", barHeight - 1);
    bar.append("text")
        .attr("x", d => x(d) - 3) //字符x轴位置
        .attr("y", barHeight/2) //字符y轴位置
        .attr("dy", ".35em") //字符相对位置
        .text(d => d);

其实差别不是特别多，只不过是用了SVG，并且把数据绑在g上，不用做另外的数据绑定

加载数据

d3.tsv()可以用于加载解析TSV格式的数据

总结

本文主要是讲述了对svg的使用，但核心思想还是不变的

参考资料

Let’s Make a Bar Chart, II
SVG 文本

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

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

使用JavaScript和D3.js实现数据可视化

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

mingde 2019-08-23 10:56 评论0 收藏0
d3.js 使用坐标轴

摘要：本片记录坐标轴入门，使用版本如何实现坐标轴生成的坐标图是通过的路径元素元素组成的，如下图表示的是底部坐标轴不包括内部刻度，如下这部分通过描绘，在中称为容器则包括了和作为即线，即文字实现坐标轴主要步骤步骤主要如下创建比例尺创建坐标轴，是个函数本片blog记录d3坐标轴入门，使用版本v5.9.2 SVG如何实现坐标轴 d3生成的坐标图是通过svg的path(路径)元素 + g + lin...

Karuru 2019-08-23 16:43 评论0 收藏0
D3.js可视化前端框架的使用要点

摘要：该事件不会区分字母的大小写，例如和被视为一致。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。而有元素与数据对应的部分称为。 1.安装

MASAILA 2019-08-22 14:57 评论0 收藏0
注释！注释！(1) - Area Chart

摘要：我的目标是，注释个的例子。这两句都是和相关的，所以放在一起讲。区域的意思是，对于一个，和之间的部分表示此覆盖的区域。是一个数组的辅助函数，可以返回其最小值和最大值。的映射是，，最大值，也就是的最低和最高。我的目标是，注释100个d3.js的例子。可能是史上最详细的。 Area Chart是Basic Charts里的第一个例子。解析 1 var margin = {top...

Java3y 2019-08-19 17:57 评论0 收藏0