我正在尝试使用 d3.js 创建一个圆环图库()。我正在使用这个库在 html 页面上创建圆环图。圆环图的切片在 mousedown 上调用方法 slice_clicked(d)。
当我必须使用单个库在页面上显示 2 个圆环图时,我陷入了困境。我不知道如何分别管理 2 个圆环图的 2 个 slice_clicked(d)。
请检查代码片段。哪里
function slice_clicked(d)
{
alert("2");
}
将在单击任何圆环图的切片时执行。我要打电话
function slice_clicked(d)
{
alert("1");
}
点击第一个 donut 切片。然后在第二个 donut 切片上单击:
function slice_clicked(d)
{
alert("2");
}
处理这种情况的最佳方法是什么?
function initdonut(elementid, domprops) {
this.update = function(data) {
var svg = d3.select(elementid)
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.append("g")
svg.append("g")
.attr("class", "slices")
.attr("width", "100%")
.attr("height", "100%");
svg.append("g")
.attr("class", "labelName")
.attr("width", "100%")
.attr("height", "100%");
svg.append("g")
.attr("class", "lines")
.attr("width", "100%")
.attr("height", "100%");
var width = $(elementid).innerWidth(),
height = $(elementid).innerHeight(),
radius = Math.min(width, height) / 2;
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var arc = d3.svg.arc()
.outerRadius(radius * 0.8)
.innerRadius(radius * 0.4);
var outerArc = d3.svg.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9);
svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
slice = svg.select(".slices").selectAll("path.slice")
.attr("class", "slices")
.data(pie(data));
slice.enter()
.insert("path");
slice.style("fill", function(d) {
return d.data.colorcode;
});
slice.style("stroke", "white")
.style("stroke-width", 3)
.attr("class", "slice")
.attr("d", function(d) {
return arc(d);
});
slice.on("mousedown", function(d) {
slice_clicked(d);
});
slice.on("mouseenter", function(d) {
svg.style("cursor", "pointer");
});
slice.on("mouseout", function(d) {
svg.style("cursor", "default");
});
slice.exit()
.remove();
};
}
var data = [{
label: "Category 1",
value: 9,
colorcode: "red"
},
{
label: "Category 2",
value: 5,
colorcode: "green"
},
{
label: "Category 3",
value: 13,
colorcode: "blue"
}
];
var donut_properties = {
isgradient: true,
textfontfamily: "sans-serif",
textfontsize: "11px",
textfontweight: "bold",
textfontcolor: "black",
};
function slice_clicked(d) { //This should be execute on click slice of donut-1
alert("1");
}
var dc = new initdonut("#piechart", donut_properties);
dc.update(data);
var data2 = [{
label: "Category 1",
value: 19,
colorcode: "red"
},
{
label: "Category 2",
value: 15,
colorcode: "green"
},
{
label: "Category 3",
value: 13,
colorcode: "blue"
}
];
var donut_properties2 = {
isgradient: true,
textfontfamily: "sans-serif",
textfontsize: "11px",
textfontweight: "bold",
textfontcolor: "black",
};
function slice_clicked(d) //This should be execute on click slice of donut-2
{
alert("2");
}
var dc2 = new initdonut("#piechart2", donut_properties2);
dc2.update(data2);
html,
body {
width: 100%;
height: 100%;
margin: none;
padding: none;
}
#piechart {
width: 50%;
height: 50%;
margin: none;
padding: none;
float: left;
}
#piechart2 {
width: 50%;
height: 50%;
margin: none;
padding: none;
float: right;
}
polyline {
opacity: .5;
stroke: black;
stroke-width: 2px;
fill: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="piechart"></div>
<div id="piechart2"></div>
最佳答案
这可能对你有帮助。
您可以尝试一下,您可以通过其 elementid
来区分每个饼图上的点击。并通过将 elemtntid 传递给 slice_clicked
函数
function initdonut(elementid, domprops) {
this.update = function(data) {
var svg = d3.select(elementid)
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.append("g")
svg.append("g")
.attr("class", "slices")
.attr("width", "100%")
.attr("height", "100%");
svg.append("g")
.attr("class", "labelName")
.attr("width", "100%")
.attr("height", "100%");
svg.append("g")
.attr("class", "lines")
.attr("width", "100%")
.attr("height", "100%");
var width = $(elementid).innerWidth(),
height = $(elementid).innerHeight(),
radius = Math.min(width, height) / 2;
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.value;
});
var arc = d3.svg.arc()
.outerRadius(radius * 0.8)
.innerRadius(radius * 0.4);
var outerArc = d3.svg.arc()
.innerRadius(radius * 0.9)
.outerRadius(radius * 0.9);
svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
slice = svg.select(".slices").selectAll("path.slice")
.attr("class", "slices")
.data(pie(data));
slice.enter()
.insert("path");
slice.style("fill", function(d) {
return d.data.colorcode;
});
slice.style("stroke", "white")
.style("stroke-width", 3)
.attr("class", "slice")
.attr("d", function(d) {
return arc(d);
});
slice.on("mousedown", function(d) {
slice_clicked(elementid,d);
});
slice.on("mouseenter", function(d) {
svg.style("cursor", "pointer");
});
slice.on("mouseout", function(d) {
svg.style("cursor", "default");
});
slice.exit()
.remove();};
}
var data = [
{
label: "Category 1",
value: 9,
colorcode: "red"
},
{
label: "Category 2",
value: 5,
colorcode: "green"
},
{
label: "Category 3",
value: 13,
colorcode: "blue"
}
];
var donut_properties = {
isgradient: true,
textfontfamily: "sans-serif",
textfontsize: "11px",
textfontweight: "bold",
textfontcolor: "black",
};
var dc = new initdonut("#piechart", donut_properties);
dc.update(data);
var data2 = [{
label: "Category 1",
value: 19,
colorcode: "red"
},
{
label: "Category 2",
value: 15,
colorcode: "green"
},
{
label: "Category 3",
value: 13,
colorcode: "blue"
}
];
var donut_properties2 = {
isgradient: true,
textfontfamily: "sans-serif",
textfontsize: "11px",
textfontweight: "bold",
textfontcolor: "black",
};
function slice_clicked(elementid, d)
{
//distinguish based on elementid
alert(elementid);
}
var dc2 = new initdonut("#piechart2", donut_properties2);
dc2.update(data2);
html,
body {
width: 100%;
height: 100%;
margin: none;
padding: none;
}
#piechart {
width: 50%;
height: 50%;
margin: none;
padding: none;
float: left;
}
#piechart2 {
width: 50%;
height: 50%;
margin: none;
padding: none;
float: right;
}
polyline {
opacity: .5;
stroke: black;
stroke-width: 2px;
fill: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="piechart"></div>
<div id="piechart2"></div>
关于javascript - 如何在Javascript中分别调用两个同名方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42687498/