Microstrategy使用可视化作为选择器的D3自定义图表

Question

我正在尝试在D3自定义图表上使用可视化选择器。我遵循SDK文档，在此处，但我无法使我的示例起作用。

基本上，我首先声明“me”变量并启用“用作过滤器”的选项。

var me = this;
this.addUseAsFilterMenuItem();

然后，当添加svg元素时，我添加了clear和end selection方法：

var g = d3.select(this.domNode).append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .on("click", function(d) {
        if (event.target.classList.contains('bar')) {
            me.clearSelections();
            me.endSelections();
            return true;
        } else {
            return true;
        }
     });

在获取数据时，我使用hasSelection属性：

var data = this.dataInterface.getRawData(mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.TREE, {
  hasSelection: true
 }).children;

当我在我的条形图上添加“applyselection”方法时：

 g.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", function(d) {
    return x(d.name);
})
.attr("y", function(d) {
    return y(d.value);
})
.attr("height", function(d) {
    return height - y(d.value);
})
.attr("width", x.rangeBand())
.style("fill", function(d) {

})
.on("click", function(d) {
    me.applySelection(d.selection);
});

但它不起作用。我设法在点击工具栏事件上对d.selection进行控制台处理,但它是未定义的。

有人能帮帮我吗？

谢谢。

- Bruno Ferreira

Answer 1

在此花费了许多时间后，我终于找出了代码的问题所在。选择方法必须这样调用：

.on("click", function(d, i) {
    me.applySelection(data[i].attributeSelector);
    return true;
});

- Bruno Ferreira