d3.js——矩形分区图

最新推荐文章于 2021-12-16 14:18:51 发布

AryaoO

最新推荐文章于 2021-12-16 14:18:51 发布

阅读量1.7k

点赞数

分类专栏：前端开发——D3 前端开发基础文章标签： d3.layout.partition 矩形分区图 rect

本文链接：https://blog.csdn.net/Selina_Chan/article/details/51315114

版权

这篇博客介绍了如何使用d3.js库来创建矩形分区图。通过加载城市.json数据，应用d3.layout.partition布局，设置尺寸，转换数据，并为每个节点绘制矩形和文本。在鼠标悬停时，矩形会变为黄色，提供交互体验。

摘要由CSDN通过智能技术生成

/**
 * Created by Silence_C on 2016/5/4.
 */
var width = 600,
    height =400;
var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height)
    .append("g");
var color = d3.scale.category20();
//数据转换
var partition = d3.layout.partition()
    .sort(null)
    .size([width,height])
    .value(function(d){return 1})//表示分区大小的值。这里的意思是：如果数据文件中用 size 值表示结点大小，那么这里可写成 return d.size

//读取数据并绘图
d3.json("city.json",function(error,root){
    if (error)  console.log(error);
    console.log(root);

    var nodes = partition.nodes(root),
        links = partition.links(nodes);
    console.log(nodes);

    开始画图
    var rects = svg.selectAll("g")
        .data(nodes)
        .enter()
        .append("g")

    rects.append("rect")
        .attr("x", function (d) {return d.x; })//顶点的x坐标
        .attr("y"