d3.js（23）
&!DOCTYPE html&
&meta charset=&utf-8&&
&title&&/title&
&script src=&js/d3.min.js& type=&text/javascript& charset=&utf-8&&&/script&
&script src=&js/jquery-1.11.3.min.js& type=&text/javascript& charset=&utf-8&&&/script&
&style type=&text/css&&
font-size: 7
&script type=&text/javascript&&
var diameter = 300,
//设置宽高
color = d3.scale.category20c();
//设置不同颜色
/*布局设置*/
var bubble = d3.layout.pack()
//初始化包图
.sort(null)
//后面的数减去前面的数排序，正负都变，null顺序不变
.size([diameter, diameter])
//设置范围
.padding(1.5);
//设置间距
/*获取并添加svg元素，并设置宽高*/
var svg = d3.select(&body&).append(&svg&)
.attr(&width&, diameter)
.attr(&height&, diameter);
/*假定后台传入的数据*/
var data = {贾嫒: , 巩嫒: , 余嫒: , 梁安: , 彭安: 3729.6};
/*entries可以将如上类型的格式转换成{key:家园,value:343434}的数组*/
var result = d3.entries(data);
/*以下是字符串拼接*/
var startString = &{\&name\&: \&flare\&,\&children\&: [&;
//开头字符串
result.forEach(function(dude){
//遍历result并且拼接
startString+=&{\&name\&:\&&+dude.key+&\&,\&size\&:&+dude.value+&},&;
/*去除最后一个末尾的逗号，这个逗号会影响后面JSON.parse的使用*/
startString = startString.substring(0,startString.length-1);
/*拼接尾部字符串*/
startString+=&]}&;
/*将拼接好的字符串转换成json对象*/
var json2 = JSON.parse(startString);
/*绘图部分*/
console.log(classes(json2));
var node = svg.selectAll(&.node&)
.data(bubble.nodes(classes(json2))
//绑定数据（配置结点）
.filter(function(d) { return !d. }))
//数据过滤，满足条件返回自身（没孩子返回自身，有孩子不返回，这里目的是去除父节点）
.enter().append(&g&)
.attr(&class&, &node&)
.attr(&transform&, function(d) { return &translate(& + d.x + &,& + d.y + &)&; });
//设定g移动
node.append(&title&)
.text(function(d) { return d.className + &: & + (d.value); });
//设置移入时候显示数据
数据名和值
node.append(&circle&)
.attr(&r&, function(d) { return d.r;})
//设置圆的半径
.style(&fill&, function(d) { return color(d.value); });
//为圆形涂色
node.append(&text&)
.attr(&dy&, &.3em&)
.style(&text-anchor&, &middle&)
//设置文本对齐
.text(function(d) { return d.className.substring(0, d.r / 3); });
//根据半径的大小来截取对应长度字符串（很重要）
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
//存储结果的数组
/*自定义递归函数
* 第二个参数指传入的json对象
function recurse(name, node) {
if (node.children)
//如果有孩子结点 （这里的children不是自带的，是json里面有的）
node.children.forEach(function(child) {
//将孩子结点中的每条数据
recurse(node.name, child); })
else {classes.push({ className: node.name, value: node.size})};
//如果自身是孩子结点的，将内容压入数组
recurse(null, root);
return {children: classes};
//返回所有的子节点
（包含在children中）
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：15068次
排名：千里之外
原创：63篇
译文：11篇
阅读：1423
文章：23篇
阅读：9116
(5)(6)(3)(7)(3)(11)(9)(15)(14)echarts 点击外部元素实现，对应图形的显示/隐藏，请问你这个问题解决了么？方便和我交流一下么？_百度知道
echarts 点击外部元素实现，对应图形的显示/隐藏，请问你这个问题解决了么？方便和我交流一下么？
提问者采纳
你想问的是
有一个按钮或者链接什么的
对应的echarts图形进行显示 和隐藏是吧。
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁echarts3地图显示为什么有问题_百度知道
echarts3地图显示为什么有问题
我有更好的答案
echarts3不再内置地图，需要手动引入地图js或json比如china.js
其他类似问题
为您推荐：
地图显示的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁请问echarts能实现多图联动吗？（不同Y轴，相同X轴） - 开源中国社区
当前访客身份：游客 [
当前位置：
是否支持类似新浪股市k线图那样，实现多图联动，即两个Y轴，一个X轴
假如目前不支持，自行修改源代码难度大不，求正解，谢谢！
共有2个答案
<span class="a_vote_num" id="a_vote_num_
楼上正解，现有功能足以支持实现，但并不高效。
多表联动的需求在功能升级列表里，升级后会有简单的解决方案，预计还有2个版本能排上。
<span class="a_vote_num" id="a_vote_num_
画2个图，，，，获取上面的事件，下面的图联动！不知道是否符合你的需要。
更多开发者职位上
有什么技术问题吗？
类似的话题}