在dc.js中使用画笔/组时,如何在散点图中显示未突出显示/未选择的数据点?并且dc.js中可能有多个画笔

时间:2018-09-07 14:56:50

标签: d3.js dc.js

我有两个问题。

  1. 是否仍可以在相应的散点图中显示未选择的数据。所选数据点周围可能有两个散点,而其他数据点仍停留在该点上,或者可能存在颜色。

  2. dc.js中是否可以有多个画笔。我可以在其中选择数据的一部分,然后在同一散点图中的另一位置再次进行选择。

问题1

这是在选择之前:

This before the selection

在图形上选择之后。我仍然希望未被选中的人仍然出现:

This after selection on the graph. I would still like the not selected ones to still appear

我对问题1的要求

what I would like for question 1

这是我的代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>dc.js - Scatter Plot Brushing Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
</head>
<body>
<div class="container">
<script type="text/javascript" src="header.js"></script>

  <p>Brush on one chart to see the points filtered on the other.</p>
  <div id="test1"></div>
  <div id="test2"></div>

  <script type="text/javascript" src="../js/d3.js"></script>
  <script type="text/javascript" src="../js/crossfilter.js"></script>
  <script type="text/javascript" src="../js/dc.js"></script>
  <script type="text/javascript">
var chart1 = dc.scatterPlot("#test1");
var chart2 = dc.scatterPlot("#test2");
var data = "x,y,z\n" +
    "1,1,3\n" +
    "5,2,11\n" +
    "13,13,13\n"+
    "5,3,20\n"+
    "12,12,10\n"+
    "3,6,8\n"+
    "15,2,9\n"+
    "8,6,14\n"+
    "1,4,9\n"+
    "8,8,12\n";
var data = d3.csvParse(data);
data.forEach(function (x) {
    x.x = +x.x;
    x.y = +x.y;
    x.z = +x.z;
});
var ndx = crossfilter(data),
    dim1 = ndx.dimension(function (d) {
        return [+d.x, +d.y];
    }),
    dim2 = ndx.dimension(function (d) {
        return [+d.y, +d.z];
    }),
    group1 = dim1.group(),
    group2 = dim2.group();
chart1.width(300)
    .height(300)
    .x(d3.scaleLinear().domain([0, 20]))
    .yAxisLabel("y")
    .xAxisLabel("x")
    .clipPadding(10)
    .dimension(dim1)
    .excludedOpacity(0.5)
    .group(group1);
chart2.width(300)
    .height(300)
    .x(d3.scaleLinear().domain([0, 20]))
    .yAxisLabel("z")
    .xAxisLabel("y")
    .clipPadding(10)
    .dimension(dim2)
    .excludedColor('#ddd')
    .group(group2);
dc.renderAll();
  </script>

</div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

A1)这将非常困难,因为dc.js将另一张图表中未选择符号的路径d设置为d="M0,0"。这意味着根本没有路径,所有符号现在都在图表的原点。

修改

看一下代码,经过一个小实验,我发现如果添加这些,那么其他点都是可见的

.emptySize(3)
.emptyOpacity(0.5)

这个名字不是很解释。