Question

我有气泡图和一个用于过滤其他图表的过滤器下拉列表（）。我想单击一个气泡（圆圈），然后传递要从下拉列表中选择的值。

这是我的选择项：

<select id="my-select" name="Cryptos" multiple="multiple"></select>

我使用d3填写：

d3.csv("Data/Symbols.csv").get(function (error, Symbolsdata) {
    if (error) throw error;

    d3.select("#my-select").selectAll(".option")
        .data(d3.map(Symbolsdata, function (d) { return d.CurrSymbol; }).keys())
        .enter().append("option")
        .text(function (d) { return d; })
        .attr("value", function (d) { return d; });

    //d3.select('#my-select').property('value', 'LTC'); // select default value
});

我可以通过alert（）成功获取值：

node.on("click", function (d) {
            alert("This bubble contains: " + d.data.Symbol);
            });

现在，我尝试将其传递给选择项，但它什么也没做：

d3.select('#my-select').property('value', d.data.Symbol);

我使用了与上面相同的代码来选择初始化下拉列表时的默认值，但是在单击事件上不起作用。我还想将多个值传递给下拉菜单（每次点击都传递一个值）。

以下是气泡图的代码：

d3.json("Data/New/Treemap_source.json", function (error, data) {
        if (error) throw error;

        var diameter = 693;
        var color = d3.scaleOrdinal(d3.schemeCategory20);
        var format = function (d){ return "BTC " + d3.format(",.2f")(d); }

        var bubble = d3.pack(data)
            .size([diameter, diameter])
            .padding(1.5);

        var svg = d3.select("#bubblediv")
            .append("svg")
            .attr("width", diameter + margin.left + margin.right)
            .attr("height", diameter + margin.top + margin.bottom)
            .attr("class", "bubble");


        var nodes = d3.hierarchy(data)
            .sum(function(d) { return d.VolumeBTC; });


        var node = svg.selectAll(".node")
            .data(bubble(nodes).descendants())
            .enter()
            .filter(function(d){
                return  !d.children
            })
            .append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + (d.x + margin.left)+ "," + (d.y + margin.top+20) + ")";
            });

            node.on("click", function (d) {
            alert("This bubble contains: " + d.data.Symbol);            
            d3.select('#my-select').property('value', d.data.Symbol);            
        });

        node.append("title")
            .text(function(d) {
                return d.data.Symbol + ": " + format(d.value);
            });

     d3.select("svg").append("text")
                        .attr("transform", "translate(" + (diameter / 2 -20) + " ,30)")
                        .attr('class','chartlabel')
                        .style("text-anchor", "middle")
                        .text("Altcoins Trading in BTC");

        node.append("circle")
            .attr("r", function(d) {
                return d.r;
            })
            .style('stroke', '#263432')
            .style('stroke-width', '1.5')
            .style("fill", function(d,i) {
                return color(i);
            });

        node.append("text")
            .attr("dy", ".2em")
            .style("text-anchor", "middle")
            .text(function(d) {
                return d.data.Symbol.substring(0, d.r / 3);
            })
            .attr("font-family", "sans-serif")
            .attr("font-size", function(d){
                return d.r/5;
            })
            .attr("fill", "white");

        node.append("text")
            .attr("dy", "1.3em")
            .style("text-anchor", "middle")
            .text(function(d) {
                return format(d.data.VolumeBTC);
            })
            .attr("font-family",  "Gill Sans", "Gill Sans MT")
            .attr("font-size", function(d){
                return d.r/6;
            })
            .attr("fill", "white");

        d3.select(self.frameElement)
            .style("height", diameter + "px");

    });

单击将过滤器从气泡图传递到下拉列表

0 个答案: