1
我正在嘗試使用d3.js創建一個圓環圖庫（）。我正在使用這個庫在html頁面上創建圓環圖。甜甜圈圖片正在調用方法slice_clicked（d） on mousedown。如何在Javascript中分別調用兩個相同的名稱方法
當我必須在使用單個庫的頁面上顯示2個甜甜圈圖表時，我被困住了。我沒有得到如何管理2 slice_clicked（d）分別爲2甜甜圈圖表。
請檢查代碼片段。其中
function slice_clicked(d)
{
alert("2");
}
將在單擊任何環形圖的切片時執行。我想打電話給
function slice_clicked(d)
{
alert("1");
}
第一次甜甜圈切片點擊。並在第二甜甜圈的片點擊：
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>
這是可實施和簡單的。但我仍然很想知道開發人員在自定義js庫中如何處理這種情況。謝謝！ –
從我個人的經驗來看，這樣的情況是由此處理的。據我所知，我們不能單獨調用具有相同名稱和相同參數個數的2個函數。 –