Microstrategy 使用可视化作为选择器 D3 服装图表
Microstrategy Using a visualization as a selector D3 costum chart
我正在尝试使用可视化作为 D3 服装图表上的选择器。我正在按照此处的 SDK 文档进行操作,但我的示例无法正常工作。
基本上我通过声明 "me" var 并启用 "use as filter" 选项来加注星标。
var me = this;
this.addUseAsFilterMenuItem();
然后,在附加 de svg 元素时,我添加了清除和结束选择方法:
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,我是未定义的。
有人可以帮我解决这个问题吗?
谢谢。
我花了很多时间才找到我的代码有什么问题。选择方法必须这样调用:
.on("click", function(d, i) {
me.applySelection(data[i].attributeSelector);
return true;
});
我正在尝试使用可视化作为 D3 服装图表上的选择器。我正在按照此处的 SDK 文档进行操作,但我的示例无法正常工作。
基本上我通过声明 "me" var 并启用 "use as filter" 选项来加注星标。
var me = this;
this.addUseAsFilterMenuItem();
然后,在附加 de svg 元素时,我添加了清除和结束选择方法:
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,我是未定义的。
有人可以帮我解决这个问题吗?
谢谢。
我花了很多时间才找到我的代码有什么问题。选择方法必须这样调用:
.on("click", function(d, i) {
me.applySelection(data[i].attributeSelector);
return true;
});