Javascript 保留/排除平行坐标d3.js中的拉丝数据
我正在努力，并试图给予它相同的功能，以保持/排除刷子中的信息作为 我已经回顾了代码，显然，Kai的示例是基于D3的V.2构建的（至少它调用的脚本在那里）。因此，大多数坐标系不是基于d3.parcoords.js库。我的问题是，如何使用parcoords.js获得相同的结果？您认为是否需要修改parcoords.js以包含Kai的功能？我认为问题在于Kai使用的方法与parcoords.js方法冲突来绘制轴 我查看了parcoords.js文档，没有任何方法或函数可以提取这些信息，至少是以相同的方式。我对javascript相当陌生，但如有任何帮助，将不胜感激 编辑： 我尝试移植的代码部分位于最底层Javascript 保留/排除平行坐标d3.js中的拉丝数据,javascript,d3.js,Javascript,D3.js,我正在努力，并试图给予它相同的功能，以保持/排除刷子中的信息作为 我已经回顾了代码，显然，Kai的示例是基于D3的V.2构建的（至少它调用的脚本在那里）。因此，大多数坐标系不是基于d3.parcoords.js库。我的问题是，如何使用parcoords.js获得相同的结果？您认为是否需要修改parcoords.js以包含Kai的功能？我认为问题在于Kai使用的方法与parcoords.js方法冲突来绘制轴 我查看了parcoords.js文档，没有任何方法或函数可以提取这些信息，至少是以相同的方
<!doctype html>
<title>Decision making tool</title>
<link rel="stylesheet" type="text/css" href="_/d3%20library/d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="_/d3%20library/style.css">
<style>
/* data table styles */
#grid {
height: 198px;
}
.row,
.header {
clear: left;
font-size: 12px;
line-height: 18px;
height: 18px;
}
.row:nth-child(odd) {
background: rgba(0, 0, 0, 0.05);
}
.header {
font-weight: bold;
}
.cell {
float: left;
overflow: hidden;
white-space: nowrap;
width: 100px;
height: 18px;
}
.col-0 {
width: 180px;
}
</style>
<script src="_/d3 library/d3.min.js"></script>
<script src="_/d3 library/d3.parcoords.js"></script>
<script src="_/d3 library/divgrid.js"></script>
<script src="_/script.js"></script>
//The header div includes the buttons that are shown below.
<div id="header">
<h1>EUI assesment tool</h1>
<button title="Zoom in on selected data" id="keep-data" disabled="disabled">Keep</button>
<button title="Remove selected data" id="exclude-data" disabled="disabled">Exclude</button>
</div>
<div id="chart" class="parcoords" style="height:600px;"></div>
<div id="grid"></div>
<script id="brushing">
// quantitative color scale
var green_to_red = d3.scale.linear()
.domain([40, 200])
.range(["green", "red"])
.interpolate(d3.interpolateLab);
var color = function(d) {
return green_to_red(d['Site EUI (kBtu/sq ft)']);
};
var parcoords = d3.parcoords()("#chart")
.color(color)
.margin({
top: 50,
left: 250,
bottom: 20,
right: 20
})
// .composite('lighter')
.alpha(0.25);
// load csv file and create the chart
d3.csv('_/data/Mock Data Chicago.csv', function(data) {
parcoords
.data(data)
.hideAxis(["Property Name", "Address", "Community Area", "ZIP Code", "# of Buildings", "ENERGY STAR Score"])
.mode("queue")
.rate(30)
.interactive()
.render()
.brushMode("1D-axes"); // enable brushing
// create data table, row hover highlighting
var grid = d3.divgrid();
d3.select("#grid")
.datum(data.slice(0, 5))
.call(grid)
.selectAll(".row")
.on({
"mouseover": function(d) {
parcoords.highlight([d])
},
"mouseout": parcoords.unhighlight
});
// update data table on brush event
parcoords.on("brush", function(d) {
d3.select("#grid")
.datum(d.slice(0, 5))
.call(grid)
.selectAll(".row")
.on({
"mouseover": function(d) {
parcoords.highlight([d])
},
"mouseout": parcoords.unhighlight
});
});
});
//Below is the code I copied from Kai's version. I think the if statement is not returning information for the buttons above to enable
if (selected.length < data.length && selected.length > 0) {
d3.select("#keep-data").attr("disabled", null);
d3.select("#exclude-data").attr("disabled", null);
} else {
d3.select("#keep-data").attr("disabled", "disabled");
d3.select("#exclude-data").attr("disabled", "disabled");
};
function keep_data() {
new_data = actives();
if (new_data.length == 0) {
alert("I don't mean to be rude, but I can't let you remove all the data.\n\nTry removing some brushes to get your data back. Then click 'Keep' when you've selected data you want to look closer at.");
return false;
}
data = new_data;
rescale();
}
// Exclude selected from the dataset
function exclude_data() {
new_data = _.difference(data, actives());
if (new_data.length == 0) {
alert("I don't mean to be rude, but I can't let you remove all the data.\n\nTry selecting just a few data points then clicking 'Exclude'.");
return false;
}
data = new_data;
rescale();
}
</script>
决策工具
/*数据表样式*/
#网格{
高度：198px；
}
一行
.标题{
清除：左；
字体大小：12px；
线高：18px；
高度：18px；
}
.行：第n个孩子（奇数）{
背景：rgba（0,0,0,0.05）；
}
.标题{
字体大小：粗体；
}
.细胞{
浮动：左；
溢出：隐藏；
空白：nowrap；
宽度：100px；
高度：18px；
}
.col-0{
宽度：180px；
}
//标题div包括如下所示的按钮。
EUI评估工具
保持
排除
//定量色标
变量绿色到红色=d3.scale.linear（）
.domain（[40200]）
.范围（[“绿色”、“红色”]）
.插值（d3.插值B）；
变量颜色=函数（d）{
将绿色变为红色（d[“现场EUI（千磅/平方英尺）”）；
};
var parcoords=d3.parcoords（）（“图表”）
.颜色（颜色）
.保证金({
前50名，
左：250，
底数：20，
右：20
})
//.composite（“打火机”）
.α（0.25）；
//加载csv文件并创建图表
d3.csv（“”/data/Mock data Chicago.csv'，函数（数据）{
帕库德
.数据（数据）
.hideAxis（[“物业名称”、“地址”、“社区面积”、“邮政编码”、“建筑物名称”、“能源之星评分”））
.模式（“队列”）
.税率（30）
.interactive（）
.render（）
.brushMode（“1D轴”）；//启用刷牙
//创建数据表，行悬停高亮显示
var grid=d3.divgrid（）；
d3.选择（“网格”）
.基准面（数据切片（0,5））
.呼叫（网格）
.selectAll（“.row”）
.在({
“鼠标悬停”：功能（d）{
parcoords.highlight（[d]）
},
“mouseout”：parcoords.unhighlight
});
//更新刷子事件的数据表
“画笔”功能（d）{
d3.选择（“网格”）
.基准面（d.切片（0,5））
.呼叫（网格）
.selectAll（“.row”）
.在({
“鼠标悬停”：功能（d）{
parcoords.highlight（[d]）
},
“mouseout”：parcoords.unhighlight
});
});
});
//下面是我从Kai的版本中复制的代码。我认为if语句没有返回要启用的上述按钮的信息
if（selected.length0）{
d3.选择（“#保留数据”）.attr（“禁用”，空）；
d3.选择（“#排除数据”）.attr（“禁用”，空）；
}否则{
d3.选择（“#保留数据”）.attr（“禁用”、“禁用”）；
d3.选择（“#排除数据”）.attr（“禁用”、“禁用”）；
};
函数keep_data（）{
new_data=actives（）；
if（new_data.length==0）{
警告（“我不是故意粗鲁，但我不能让你删除所有数据。\n\n尝试删除一些画笔以取回数据。然后在选择要仔细查看的数据后单击“保留”。）；
返回false；
}
数据=新数据；
重新缩放（）；
}
//从数据集中排除所选内容
函数exclude_data（）{
new_data=u.difference（data，actives（））；
if（new_data.length==0）{
警告（“我不是故意粗鲁，但我不能让您删除所有数据。\n\n请尝试只选择几个数据点，然后单击“排除”。”；
返回false；
}
数据=新数据；
重新缩放（）；
}
可能是if语句没有获取信息？最好在此处添加该代码。Hello@HanletEscaño谢谢您的提示。我更新了我的帖子。如果你在这里添加代码，那将是最好的。Hello@HanletEscaño谢谢你的提示。我更新了我的帖子。