Question

我有一个具有以下架构的数据集：

        //ignições
        var locations = [
            ["Recusado", "13/02/2019", 38.776816, -9.441833, 335, "foto.jpg", ],
            ["Aceite", "15/08/2019",38.817562, -8.941728, 36, "foto.jpg"],
            ["Em avaliação", "20/07/2019",38.487978, -9.004425, 90,"foto.jpg"],
            ["Concluído", "01/07/2019",37.045804, -8.898041, 12, "foto.jpg"]

        ];


        function setMarkers(map) {
            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < locations.length; i++) {
                var fire = locations[i];
                var marker;

                var contentString = '<div id="content">' +
                    '<div id="siteNotice">' +
                    '</div>' +
                    '<div id="bodyContent">' +
                    '<p><b>Avaliação da Ocorrência:</b></p>' +
                    '<p>Fotografias:' + fire[5] + '</p>' +
                    '<p>Avaliação:' + fire[0] + '</p>' +
                    '<p>Data:' + fire[1] + '</p></br>' +
                    '<button id="aceite" >Aceitar</button>' +
                    '<button id="recusado">Recusar</button>' +
                    //'<button> Em avaliação</button>' +
                    '<button id="concluido"> Concluído</button>' +
                    '</div>';
                var infoWindow = new google.maps.InfoWindow({ content: contentString });

                marker = new google.maps.Marker({
                    position: { lat: fire[2], lng: fire[3] },
                    map: map,
                    info: contentString,
                    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'

                });
                bounds.extend(marker.getPosition());

                google.maps.event.addListener(marker, 'click', function () {
                    var marker = this;
                    infoWindow.setContent(this.info);
                    google.maps.event.addListener(infoWindow, 'domready', function () {

                        google.maps.event.addDomListener(document.getElementById("recusado"), 'click', function (e) {
                            marker.setMap(null);
                        })

                        google.maps.event.addDomListener(document.getElementById("aceite"), 'click', function (e) {
                            marker.setIcon('http://maps.google.com/mapfiles/marker_green.png');
                        })

                        google.maps.event.addDomListener(document.getElementById("concluido"), 'click', function (e) {
                            marker.setIcon('http://maps.google.com/mapfiles/marker_grey.png');

                        })
                    });
                     infoWindow.open(map, this);
                });
            }
            map.fitBounds(bounds);
        }

我想绘制一系列图表，将place1和place2组合在一起，将时间显示为x数据，foo显示为y数据，并在工具提示中显示其他字段。
看一下example，我要做的第一件事是创建一个维度并使用place1和place2对数据集进行分组。

{
    "time": Date,
    "foo": Number,
    "bar": Number,
    "change": Number
    "place1": String,
    "description": String,
    "place2": String
}

此后，我创建了一个组，因为我希望显示数据而不进行聚合，所以我只使用了group函数：

const placeDimension = ndx.dimension((d) => [d.place1, d.place2]);

从那时起，我对如何使用之前创建的两个对象进行系列图绘制感到困惑。
如何选择要在X和Y轴上绘制的属性？（在这种情况下，X是foo的时间，Y是foo的时间）。如何在工具提示中显示其他属性？（我知道如何使用工具提示，但我不知道如何使用不在维度内的数据。）

Answer 1

在dc.js和交叉过滤器中，X轴通常是分组数据的“键”，Y轴是计数（或其他聚合）。

如果每个键都是唯一的，并且您确实如此

const placeGroup = placeDimension.group().reduceSum(d => d.foo)

然后它将对一个值求和并将其返回给您。因此，您的键（X）将为place1,place2，而值将为foo。

然后，您可以使用seriesAccessor和keyAccessor将键拉回，如您所链接的示例。

工具提示在实现它们的HTML / SVG元素之后在dc.js中称为"titles"。您可以根据需要在访问器中设置文本格式，包括换行符。带注释的股票示例shows this in action。

注意事项

所有这些，没有很多很好的理由将dc.js与未聚合的数据一起使用。该库仅在通过过滤图表进行交互时发光，并且仅在使用交叉过滤器聚合数据时过滤才起作用。

学习另一个图表库可能会更容易，因为您没有使用任何使dc.js变得特别的功能。

无法使用尺寸对象外部的数据呈现序列图

1 个答案:

注意事项