在 dc.js 中使用画笔/组时如何在散点图上显示未突出显示/未选择的数据点？在 dc.js 中是否可以使用多个画笔答案

【问题标题】：How to show the unhighlighted/ not selected data points on scatter plots when using brush/group in dc.js? And is multiple brushes possible in dc.js在 dc.js 中使用画笔/组时如何在散点图上显示未突出显示/未选择的数据点？在 dc.js 中是否可以使用多个画笔
【发布时间】：2018-09-07 14:56:49
【问题描述】：

我有两个问题。

是否仍然可以在相应的散点图中显示未选择的数据。在所选数据点周围可以有两个散点，其他数据点会保留，或者是否可以有颜色。
dc.js 中是否可以有多个画笔。我可以在其中选择一部分数据，然后在同一个散点图中的另一个位置再次执行此操作。

关于问题 1

这是在选择之前：

在图表上选择后。我仍然希望未选中的那个仍然出现：

我对问题 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>

【问题讨论】：

Re: Q2: 已请求但目前不可行：github.com/dc-js/dc.js/issues/1288

标签： d3.js dc.js

【解决方案1】：

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

编辑

查看代码，经过一些小实验后，我发现如果添加这些点，则其他点都是可见的

.emptySize(3)
.emptyOpacity(0.5)

名字不是很清楚。

【讨论】：

对，crossfilter 本身不会删除空的 bin，所以点确实存在，你只需要添加正确的编码。是的，这不是一个很好的界面。向后兼容的修复总是受欢迎的！
非常感谢。有没有其他的交互式 js 你会推荐？