D3.js学习总结

最新推荐文章于 2021-06-15 16:16:55 发布

hongfei233

最新推荐文章于 2021-06-15 16:16:55 发布

阅读量388

点赞数 1

分类专栏： javascript 文章标签： d3.js javascript

本文链接：https://blog.csdn.net/virus2014/article/details/52129063

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、选择、插入和删除操作

选择使用select或者selectAll，分别是选择一个和选择全部
append("插入节点")：在选择集末尾插入元素
insert("插入节点", "选定的元素")：在选择集前面插入元素
remove()；
上面四个操作是建立在选项集的基础上的

<body>
  <p>apple</p>
  <p id="del">Pear</p>
  <p>Banana</p>
  <script type="text/javascript">
    var body = d3.select("body");
    body.select("#del").style("color", "green");
    var p1 = body.select("p");
    p1.style("color", "red");

    p1.append("p").text("this is a append element");
    body.insert("p", "#del").text("this is a insert element");
    body.select("#del").remove();
  </script>
</body>

二、D3给DOM中数据赋值

datum() 赋值一个数据到选项集中
data()  赋值一个数组到选项集中

示例：

# html代码：
<p>Apple</p>
<p>Pear</p>
<p>Banana</p>


# JS代码———使用datum()
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
  return "第 "+ i + " 个元素绑定的数据是 " + d;
});
# 执行结果
第 0 个元素绑定的数据是 China
第 1 个元素绑定的数据是 China
第 2 个元素绑定的数据是 China


#JS代码———使用data()
var dataset = ["I like dogs","I like cats","I like snakes"];
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset)
  .text(function(d, i){
      return d;
  });
# 执行结果
like dogs
I like cats
I like snakes

三、D3比例尺的使用

线性比例尺，能将一个连续的区间，映射到另一区间。要解决柱形图宽度的问题，就需要线性比例尺。

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
//将dataset中最小的值，映射成0;将最大的值，映射成300。
var min = d3.min(dataset);
var max = d3.max(dataset);
//两个函数能够求数组的最大值和最小值，是 D3 提供的。

var linear = d3.scale.linear()
//d3.scale.linear()返回一个线性比例尺。
        .domain([min, max])
        .range([0, 300]);
//domain()和range()分别设定比例尺的定义域和值域

linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

序数比例尺

//有时候，定义域和值域不一定是连续的。例如，有两个数组：

var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

//我们希望 0 对应颜色 red，1 对应 blue，依次类推。
//但是，这些值都是离散的，线性比例尺不适合，需要用到序数比例尺。
var ordinal = d3.scale.ordinal()
        .domain(index)
        .range(color);
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black
//用法与线性比例尺是类似的。

柱状图+序数比例尺示例：

var width = 300;
var height = 300;
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

//var dataset = [250, 210, 170, 130, 90, 200, 234];

var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
var linear = d3.scale.linear()
  .domain([0, d3.max(dataset)])
  .range([0, 250]);

var rectHeight = 25;
//var svg = body.select("svg");
svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", 20)
  .attr("y", function(d, i) {
    return i * rectHeight;
  })
  .attr("width", function(d){
    return linear(d);
  })
  .attr("height", rectHeight - 2)
  .attr("fill", "steelblue");

注意：enter()数的作用是返回一个新的D3()对象集合，这个集合包含了所有没有被可视化啊的数据。这是D3将数据与图形的联系定义的一种模式（enter-update-exit）叫作Enter Mode

四、定义坐标轴

// 数据
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
// 定义比例尺
var linear = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, 250]);

var axis = d3.svg.axis()
      .scale(linear)      //指定比例尺
      .orient("bottom")   
      //指定刻度的方向,bottom 表示在坐标轴的下方显示。
      .ticks(7);          //指定刻度的数量

定义了坐标轴之后，只需要在 SVG 中添加一个分组元素 ，再将坐标轴的其他元素添加到这个 里即可。代码如下：

svg.append("g").call(axis);
//在D3中，call() 的参数是一个函数。调用之后，将当前的选择集作为参数传递给此函数。

参考资料：ourd3js.com

hongfei233

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录