如何在Javascript中分别调用两个相同的名称方法

Question

我正在尝试使用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"); 
}

在第一个甜甜圈切片上点击。并在第二个甜甜圈的切片上点击：

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>

Answer 1

这可能会对你有帮助。

您可以尝试将每个饼图上的点击与其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>

Answer 2

我已设法通过

解决问题

slice.on("mousedown", function(d){  
    window[domprops.sliceClicked](d);
});

并传递函数名称，如：

var donut_properties = {
isgradient : true,
textfontfamily : "sans-serif",
textfontsize : "14px",
textfontweight : "bold",
textfontcolor : "black",
sliceClicked : "slice_clicked"
};