मेरे पास दो आर्क्स के साथ एक d3 डोनट चार्ट है, मुख्य आर्क एज माउस ओवर पर d ऑब्जेक्ट के लिए गलत डेटा पुनर्प्राप्त करता है। चाप के बाकी सभी क्षेत्र लॉग में सही डेटा दिखाते हैं।

रंगीन क्षेत्र का मान 70 है और दूसरा चाप 30 के साथ है। रंगीन मुख्य चाप किनारे दूसरे चाप (30) का डेटा दिखाता है।

बेला

// data
var dataset = [{
    color: "#5FC5EA",
    value: 70
}, {
    color: "transparent",
    value: 30
}];

// size
var width = 460, z
height = 300,
radius = Math.min(width, height) / 2;

var pie = d3.layout.pie()
.sort(null).value(function(d) {
    return d.value;
});

// thin arc
var arc1 = d3.svg.arc()
.innerRadius(radius - 20)
.outerRadius(radius - 11);

// main arc
var arc = d3.svg.arc()
.innerRadius(radius - 16)
.outerRadius(radius - 17);

// set svg
var svg = d3.select("#d3-setup-donut").append("svg")
.attr("class",'donut-chart')
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.on('mouseout', function() {
    d3.selectAll('.donut-tooltip').style('display','none');
});

// tooltip
var div = d3.select("body")
.append("div") 
.attr("class", "donut-tooltip");

// draw thinner arc
var path = svg.selectAll(".background")
.data(pie([{
    color: "#222427",
    value: 1
}]))
.enter().append("path")
.attr("class", "background")
.attr("fill", function(d, i) {
    return d.data.color;
})
.attr("d", arc1)
.on('click', function(d, i) {
    //
})
.on("mousemove",function(d, i) {
    var mouseVal = d3.mouse(this);
    div.style("display","none");
    div.html(d.data.label+" : "+d.value)
    .style("left", (d3.event.pageX-40) + "px")
    .style("top", (d3.event.pageY-35) + "px")
    .style("opacity", 1)
    .style("display","block");
})
.on("mouseout",function(){
    div.html(" ").style("display","none");
});

// draw main arc
var path = svg.selectAll(".foreground")
.data(pie(dataset))
.enter().append("path")
.attr("class", "foreground")
//.attr("stroke-linejoin", "round")
//.attr("stroke-linecap", "round")
.attr("stroke-width", "20")
.attr("stroke","none")
.attr("stroke", function(d, i) {
    return d.data.color;
})
.attr("fill", "none")
.attr("d", arc)
.on('click', function(d, i) {
    //
})
.on("mousemove",function(d, i) {
    console.log(d)
    var mouseVal = d3.mouse(this);
    div.style("display","none");
    div.html(d.data.label+" : "+d.value)
    .style("left", (d3.event.pageX-40) + "px")
    .style("top", (d3.event.pageY-35) + "px")
    .style("opacity", 1)
    .style("display","block");
})
.on("mouseout",function(){
    div.html(" ").style("display","none");
});

// draw inner text
svg.append("text")
.text('60%')
.attr("class", "donut-inner-val")
//.attr("x", radius/12 - 30)
//.attr("y", radius/12 - 10);

svg.append("text")
.text('in progress')
.attr("class", "donut-inner-text")
.attr("x", (radius/12) - 35)
.attr("y", (radius/12) + 10);
2
Anshad Vattapoyil 11 मार्च 2017, 16:24
1
मैं इसका पालन नहीं कर रहा हूं। नीले चाप में 70 डेटा के रूप में है, और टूलटिप 70 दिखाता है। क्या यह सही नहीं है?
 – 
Gerardo Furtado
11 मार्च 2017, 16:56
रंगीन चाप के किनारे पर माउस ले जाएँ। यह 70 के बजाय 30 दिखाता है। यही मुद्दा है।
 – 
devo
11 मार्च 2017, 17:41

1 उत्तर

सबसे बढ़िया उत्तर

आपकी समस्या stroke-width विशेषता के कारण हो रही है। यह क्या होता है: स्ट्रोक की चौड़ाई न केवल चाप के किनारों पर पिक्सेल जोड़ती है, बल्कि इसके अंत में पिक्सेल भी जोड़ती है।

हम इसे निम्नलिखित डेमो में देख सकते हैं, स्ट्रोक की चौड़ाई को बढ़ा-चढ़ाकर और पारदर्शी पथ को रंगते हुए (मैंने अस्पष्टता भी बदल दी है, ताकि आप देख सकें कि प्रत्येक पथ कहाँ समाप्त होता है):

// data
var dataset = [{
  color: "#5FC5EA",
  value: 70
}, {
  color: "red",
  value: 30
}];

// size
var width = 460,
  z
height = 300,
  radius = Math.min(width, height) / 2;

var pie = d3.layout.pie()
  .sort(null).value(function(d) {
    return d.value;
  });

// thin arc
var arc1 = d3.svg.arc()
  .innerRadius(radius - 20)
  .outerRadius(radius - 11);

// main arc
var arc = d3.svg.arc()
  .innerRadius(radius - 16)
  .outerRadius(radius - 17);

// set svg
var svg = d3.select("#d3-setup-donut").append("svg")
  .attr("class", 'donut-chart')
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .on('mouseout', function() {
    d3.selectAll('.donut-tooltip').style('display', 'none');
  });

// tooltip
var div = d3.select("body")
  .append("div")
  .attr("class", "donut-tooltip");

// draw thinner arc
var path = svg.selectAll(".background")
  .data(pie([{
    color: "#222427",
    value: 1
  }]))
  .enter().append("path")
  .attr("class", "background")
  .attr("fill", function(d, i) {
    return d.data.color;
  })
  .attr("d", arc1)
  .on('click', function(d, i) {
    //
  })
  .on("mousemove", function(d, i) {
    var mouseVal = d3.mouse(this);
    div.style("display", "none");
    div.html(d.data.label + " : " + d.value)
      .style("left", (d3.event.pageX - 40) + "px")
      .style("top", (d3.event.pageY - 35) + "px")
      .style("opacity", 1)
      .style("display", "block");
  })
  .on("mouseout", function() {
    div.html(" ").style("display", "none");
  });

// draw main arc
var path = svg.selectAll(".foreground")
  .data(pie(dataset))
  .enter().append("path")
  .attr("class", "foreground")
  //.attr("stroke-linejoin", "round")
  //.attr("stroke-linecap", "round")
  .attr("stroke-width", (d,i)=>60 - i*10)
  .attr("opacity", (d,i)=> 1 - i*0.2)
  .attr("stroke", "none")
  .attr("stroke", function(d, i) {
    return d.data.color;
  })
  .attr("fill", "none")
  .attr("d", arc)
  .on('click', function(d, i) {
    //
  })
  .on("mousemove", function(d, i) {
    var mouseVal = d3.mouse(this);
    div.style("display", "none");
    div.html(d.data.label + " : " + d.value)
      .style("left", (d3.event.pageX - 40) + "px")
      .style("top", (d3.event.pageY - 55) + "px")
      .style("opacity", 1)
      .style("display", "block");
  })
  .on("mouseout", function() {
    div.html(" ").style("display", "none");
  });

// draw inner text
svg.append("text")
  .text('60%')
  .attr("class", "donut-inner-val")
  //.attr("x", radius/12 - 30)
  //.attr("y", radius/12 - 10);

svg.append("text")
  .text('in progress')
  .attr("class", "donut-inner-text")
  .attr("x", (radius / 12) - 35)
  .attr("y", (radius / 12) + 10);
$pale-blue: #f6f8fe;
$dark-two:#253644;
$pale-grey: #f0f4f7;
$font-roman:'Helvetica LT W01 Roman';
$font-light:'Helvetica LT W01 Light';
$font-bold:'Helvetica LT W01 Bold';
body {
  background-color:#25333F;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.donut-inner-val{
		text-anchor:middle;
		font-family: $font-light;
		font-size: 24px;
		fill:$pale-blue;
	}
	.donut-inner-text {
		font-family: $font-light;
		font-size: 10px;
		fill:$pale-blue;
	}
	.background {
		z-index:1;
	}
	.foreground {
		z-index:2;
	}
	.foreground, .background {
		cursor:pointer;
	}
  .donut-tooltip{
	line-height: 1;
	font-weight: normal;
	padding: 10px 5px;
	background: #ccc;
	border-color:#ccc;
	//opacity:.5;
	color: #333;
	border-radius: 2px;
	font-size:11px;
	position: absolute;	
	text-align: center;		
	height: 28px;			
	opacity:0;	
	z-index:99999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="d3-setup-donut" style="margin:30px auto;"></div>

जैसा कि आप देख सकते हैं, लाल पथ नीले पथ को ओवरलैप कर रहा है।

समाधान: आंतरिक और बाहरी त्रिज्या बदलें, और fill का उपयोग करके पथ पेंट करें, न कि stroke:

// data
var dataset = [{
  color: "#5FC5EA",
  value: 70
}, {
  color: "transparent",
  value: 30
}];

// size
var width = 460,
  z
height = 300,
  radius = Math.min(width, height) / 2;

var pie = d3.layout.pie()
  .sort(null).value(function(d) {
    return d.value;
  });

// thin arc
var arc1 = d3.svg.arc()
  .innerRadius(radius - 20)
  .outerRadius(radius - 11);

// main arc
var arc = d3.svg.arc()
  .innerRadius(radius - 30)
  .outerRadius(radius);

// set svg
var svg = d3.select("#d3-setup-donut").append("svg")
  .attr("class", 'donut-chart')
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .on('mouseout', function() {
    d3.selectAll('.donut-tooltip').style('display', 'none');
  });

// tooltip
var div = d3.select("body")
  .append("div")
  .attr("class", "donut-tooltip");

// draw thinner arc
var path = svg.selectAll(".background")
  .data(pie([{
    color: "#222427",
    value: 1
  }]))
  .enter().append("path")
  .attr("class", "background")
  .attr("fill", function(d, i) {
    return d.data.color;
  })
  .attr("d", arc1)
  .on('click', function(d, i) {
    //
  })
  .on("mousemove", function(d, i) {
    var mouseVal = d3.mouse(this);
    div.style("display", "none");
    div.html(d.data.label + " : " + d.value)
      .style("left", (d3.event.pageX - 40) + "px")
      .style("top", (d3.event.pageY - 35) + "px")
      .style("opacity", 1)
      .style("display", "block");
  })
  .on("mouseout", function() {
    div.html(" ").style("display", "none");
  });

// draw main arc
var path = svg.selectAll(".foreground")
  .data(pie(dataset))
  .enter().append("path")
  .attr("class", "foreground")
  //.attr("stroke-linejoin", "round")
  //.attr("stroke-linecap", "round")
  .attr("stroke-width", "1")
  .attr("stroke", "none")
  .attr("fill", function(d, i) {
    return d.data.color;
  })
  .attr("d", arc)
  .on('click', function(d, i) {
    //
  })
  .on("mousemove", function(d, i) {
    var mouseVal = d3.mouse(this);
    div.style("display", "none");
    div.html(d.data.label + " : " + d.value)
      .style("left", (d3.event.pageX - 40) + "px")
      .style("top", (d3.event.pageY - 55) + "px")
      .style("opacity", 1)
      .style("display", "block");
  })
  .on("mouseout", function() {
    div.html(" ").style("display", "none");
  });

// draw inner text
svg.append("text")
  .text('60%')
  .attr("class", "donut-inner-val")
  //.attr("x", radius/12 - 30)
  //.attr("y", radius/12 - 10);

svg.append("text")
  .text('in progress')
  .attr("class", "donut-inner-text")
  .attr("x", (radius / 12) - 35)
  .attr("y", (radius / 12) + 10);
$pale-blue: #f6f8fe;
$dark-two:#253644;
$pale-grey: #f0f4f7;
$font-roman:'Helvetica LT W01 Roman';
$font-light:'Helvetica LT W01 Light';
$font-bold:'Helvetica LT W01 Bold';
body {
  background-color:#25333F;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.donut-inner-val{
		text-anchor:middle;
		font-family: $font-light;
		font-size: 24px;
		fill:$pale-blue;
	}
	.donut-inner-text {
		font-family: $font-light;
		font-size: 10px;
		fill:$pale-blue;
	}
	.background {
		z-index:1;
	}
	.foreground {
		z-index:2;
	}
	.foreground, .background {
		cursor:pointer;
	}
  .donut-tooltip{
	line-height: 1;
	font-weight: normal;
	padding: 10px 5px;
	background: #ccc;
	border-color:#ccc;
	//opacity:.5;
	color: #333;
	border-radius: 2px;
	font-size:11px;
	position: absolute;	
	text-align: center;		
	height: 28px;			
	opacity:0;	
	z-index:99999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="d3-setup-donut" style="margin:30px auto;"></div>

यह वही कोड है, लेकिन पारदर्शी पथ को लाल रंग से रंग रहा है। अब, आप देख सकते हैं कि यह सही अंत कोण पर समाप्त होता है:

// data
var dataset = [{
  color: "#5FC5EA",
  value: 70
}, {
  color: "red",
  value: 30
}];

// size
var width = 460,
  z
height = 300,
  radius = Math.min(width, height) / 2;

var pie = d3.layout.pie()
  .sort(null).value(function(d) {
    return d.value;
  });

// thin arc
var arc1 = d3.svg.arc()
  .innerRadius(radius - 20)
  .outerRadius(radius - 11);

// main arc
var arc = d3.svg.arc()
  .innerRadius(radius - 30)
  .outerRadius(radius);

// set svg
var svg = d3.select("#d3-setup-donut").append("svg")
  .attr("class", 'donut-chart')
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .on('mouseout', function() {
    d3.selectAll('.donut-tooltip').style('display', 'none');
  });

// tooltip
var div = d3.select("body")
  .append("div")
  .attr("class", "donut-tooltip");

// draw thinner arc
var path = svg.selectAll(".background")
  .data(pie([{
    color: "#222427",
    value: 1
  }]))
  .enter().append("path")
  .attr("class", "background")
  .attr("fill", function(d, i) {
    return d.data.color;
  })
  .attr("d", arc1)
  .on('click', function(d, i) {
    //
  })
  .on("mousemove", function(d, i) {
    var mouseVal = d3.mouse(this);
    div.style("display", "none");
    div.html(d.data.label + " : " + d.value)
      .style("left", (d3.event.pageX - 40) + "px")
      .style("top", (d3.event.pageY - 35) + "px")
      .style("opacity", 1)
      .style("display", "block");
  })
  .on("mouseout", function() {
    div.html(" ").style("display", "none");
  });

// draw main arc
var path = svg.selectAll(".foreground")
  .data(pie(dataset))
  .enter().append("path")
  .attr("class", "foreground")
  //.attr("stroke-linejoin", "round")
  //.attr("stroke-linecap", "round")
  .attr("stroke-width", "1")
  .attr("stroke", "none")
  .attr("fill", function(d, i) {
    return d.data.color;
  })
  .attr("d", arc)
  .on('click', function(d, i) {
    //
  })
  .on("mousemove", function(d, i) {
    var mouseVal = d3.mouse(this);
    div.style("display", "none");
    div.html(d.data.label + " : " + d.value)
      .style("left", (d3.event.pageX - 40) + "px")
      .style("top", (d3.event.pageY - 55) + "px")
      .style("opacity", 1)
      .style("display", "block");
  })
  .on("mouseout", function() {
    div.html(" ").style("display", "none");
  });

// draw inner text
svg.append("text")
  .text('60%')
  .attr("class", "donut-inner-val")
  //.attr("x", radius/12 - 30)
  //.attr("y", radius/12 - 10);

svg.append("text")
  .text('in progress')
  .attr("class", "donut-inner-text")
  .attr("x", (radius / 12) - 35)
  .attr("y", (radius / 12) + 10);
$pale-blue: #f6f8fe;
$dark-two:#253644;
$pale-grey: #f0f4f7;
$font-roman:'Helvetica LT W01 Roman';
$font-light:'Helvetica LT W01 Light';
$font-bold:'Helvetica LT W01 Bold';
body {
  background-color:#25333F;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.donut-inner-val{
		text-anchor:middle;
		font-family: $font-light;
		font-size: 24px;
		fill:$pale-blue;
	}
	.donut-inner-text {
		font-family: $font-light;
		font-size: 10px;
		fill:$pale-blue;
	}
	.background {
		z-index:1;
	}
	.foreground {
		z-index:2;
	}
	.foreground, .background {
		cursor:pointer;
	}
  .donut-tooltip{
	line-height: 1;
	font-weight: normal;
	padding: 10px 5px;
	background: #ccc;
	border-color:#ccc;
	//opacity:.5;
	color: #333;
	border-radius: 2px;
	font-size:11px;
	position: absolute;	
	text-align: center;		
	height: 28px;			
	opacity:0;	
	z-index:99999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="d3-setup-donut" style="margin:30px auto;"></div>
3
Gerardo Furtado 11 मार्च 2017, 18:20
उत्तम! विस्तृत स्पष्टीकरण के लिए धन्यवाद।
 – 
devo
11 मार्च 2017, 18:15