मैं इस फिडेल पर काम कर रहा हूं लेकिन ग्राफ नहीं दिख रहा है, मैं यहां क्या खो रहा हूं? वर्किंग फिडल मैं एक लंबवत बार ग्राफ बना रहा हूं और बार पर टूलटिप्स दिखाने की जरूरत है।

मैं इसका उपयोग माउसओवर पर टूलटिप जोड़ने के लिए कर रहा हूं

  d3.select('#tooltip')
                                    .style('left', xPos + 'px')
                                    .style('top', yPos + 'px')
                                    .style('display','block')
                                    .select('#value')
                                    .text(d.global);
-1
separ1 25 अक्टूबर 2016, 15:21
पहेली में D3 पुस्तकालय गायब है और शायद कुछ अन्य पुस्तकालय भी।
 – 
Maximilian Peters
25 अक्टूबर 2016, 15:33
इसमें [fiddle] jsfiddle.net/enigmarm/juY5E/6 भी पुस्तकालयों में नहीं है शामिल किया गया है, लेकिन ऐसा लगता है कि यह ठीक काम करता है
 – 
separ1
25 अक्टूबर 2016, 15:39
यह बाहरी संसाधनों (बाईं ओर) में है।
 – 
Maximilian Peters
25 अक्टूबर 2016, 15:51
बस बाहरी संसाधनों में d3js.org/d3.v3.min.js जोड़ें और ग्राफ इसे लोड करेगा।
 – 
Maximilian Peters
25 अक्टूबर 2016, 17:01
मैं समझ गया। लेकिन मैंने जो टूलटिप जोड़ा है वह अभी भी काम नहीं कर रहा है। यह रही अपडेट की गई फिडल jsfiddle.net/c74eoo2b/2
 – 
separ1
25 अक्टूबर 2016, 21:01

1 उत्तर

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

यहां कई मुद्दे हैं:

  • आप किसी भी div को id="tooltip" के साथ परिभाषित/जोड़ नहीं रहे हैं
  • mouseover/mouseout इवेंट को svg.selectAll(".set") का हिस्सा होना चाहिए
  • आपके xScale और yScale will हमेशा undefined मान देते हैं

आपको यहां से जारी रखने में सक्षम होना चाहिए:

var div = d3.select("body").append("div")
  .attr("id", "tooltip")
  .style("opacity", 0);
var margin = {
    top: 25,
    right: 40,
    bottom: 35,
    left: 85
  },
  w = 500 - margin.left - margin.right,
  h = 220 - margin.top - margin.bottom;
var padding = 10;
var formatPercent = d3.format(".0%");

var color = d3.scale.ordinal().range(['#3cbcbd', '#4abc81', '#dcd048', '#4dcc37']);

var dataset = [{
  "keyword": "Descriptive",
  'global': 70
}, {
  "keyword": "Inquisitive",
  'global': 60
}, {
  "keyword": "Predictive",
  'global': 47
}, {
  "keyword": "Prescriptive",
  'global': 44
}];
var total = 0;
dataset.forEach(function(d) {
  total += d.global;
});
var xScale = d3.scale.ordinal()
  .domain(d3.range(dataset.length))
  .rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
  .domain([0, 100])
  .range([h, 0]);
var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom")
  .tickFormat(function(d) {
    return dataset[d].keyword;
  });
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left")
  .ticks(10);


var global = function(d) {
  return d.global;
};

var commaFormat = d3.format(".0%");
//SVG element
d3.select('svg#dippSVG').remove();
var svg = d3.select("#vertical_bar_chart_container")
  .append("svg")
  .attr('width', "80%")
  .attr('height', "80%")
  .attr("viewBox", "0 0 500 250")
  .attr("class", "vert_bar_chart_graph")
  .attr("id", "dippSVG")
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Graph Bars
var sets = svg.selectAll(".set")
  .data(dataset)
  .enter()
  .append("g")
  .attr("class", "set")
  .attr("transform", function(d, i) {
    return "translate(" + xScale(i) + ",0)";
  })
  .on('mouseover', function(d) {
    var xPos = xScale(dataset.indexOf(d));
    var yPos = yScale(d.global);
    var div = d3.select('#tooltip')
      .style("left", xPos + "px")
      .style("top", yPos + "px")
      .style("opacity", 1)
      .html('<span>' + d.global + '</span>')


  })
  .on('mouseout', function() {
    var div = d3.select('#tooltip')
      .style("opacity", 0);
  });


sets.append("rect")
  .attr("class", "global")
  .attr("width", xScale.rangeBand() / 2)
  .attr('y', function(d) {
    return yScale((d.global / total) * 100);
  })
  .attr("height", function(d) {
    return h - yScale((d.global / total) * 100);
  })
  .attr('fill', function(d, i) {
    return color(d.global);
  })
  .append("text")
  .text(function(d) {
    return commaFormat((d.global / total) * 100);
  })
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .on('mouseover', function(d) {
    var xPos = 70 + parseFloat(d3.select(this).attr('w'));
    var yPos = parseFloat(d3.select(this).attr('y')) + yScale.rangeBand() + 30;

    d3.select('#tooltip')
      .style('left', xPos + 'px')
      .style('top', yPos + 'px')
      .style('display', 'block')
      .select('#value')
      .text(d.global);

    d3.select('#tooltip').classed('hidden', false);
  })
  .on('mouseout', function() {
    d3.select('#tooltip').classed('hidden', true);
  })


function make_y_axis() { //function to make grid lines
  return d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(10)
}

//append text
sets.append("text")
  .attr("class", "global")
  .attr("y", function(d) {
    return yScale((d.global / total) * 100) - (margin.top / 4);
  })
  .attr("dy", 5)
  .attr("dx", (xScale.rangeBand() / 8))
  .attr("font-family", "sans-serif")
  .attr("font-size", "14px")
  .attr("fill", "black")
  .text(function(d) {
    return (d.global > 0) ? commaFormat(d.global / total) : "";
  });

// xAxis
svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (h) + ")")
  .call(xAxis);
// yAxis
svg.append("g")
  .attr("class", "y axis")
  .attr("transform", "translate(0 ,0)")
  .call(yAxis);

svg.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - margin.left + margin.top)
  .attr("x", 0 - (h / 2))
  .attr("dy", "1em")
  .style("text-anchor", "middle")
  .text("Percentage of Tests");

//y axis grid line functions
svg.append("g")
  .attr("class", "grid")
  .call(make_y_axis()
    .tickSize(-w, 0, 0)
    .tickFormat("")
  )
#tooltip {
  position: absolute;
  width: 50px;
  height: auto;
  padding: 10px;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#tooltip.hidden {
  display: none;
}

#tooltip p {
  margin: 0;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.indent {
  padding-left: 5px;
}

rect {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

rect:hover {
  fill: orange;
}

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<div id="vertical_bar_chart_container"></div>
0
Maximilian Peters 26 अक्टूबर 2016, 00:20
हम .set से क्यों जुड़ते हैं और .rect में नहीं?
 – 
separ1
26 अक्टूबर 2016, 09:21