score:0
Accepted answer
to get the position of the circle, just use a getter...
var value = circle.attr("cy");
and update a text variable (here named text
) with the math to get the percentage:
text.text("value: " + ~~(100*(value-y1)/(y2-y1)) + "%")
here is the demo:
var width = 50;
var height = 300;
var canvas = d3.select("svg")
.attr("width", 1600)
.attr("height", 1000)
.datum({
x: width / 2,
y: height / 2,
});
var radius = 10;
var margin = 10;
var y1 = margin;
var y2 = height - margin;
var x = width / 2;
var drag = d3.behavior.drag()
.origin(function(d) {
return d;
})
.on("drag", dragmove);
var text = canvas.append("text")
.attr("x", 50)
.attr("y", height/2)
.text("value: 50%")
var line = canvas.append("line")
.attr("y1", y1)
.attr("y2", y2)
.attr("x1", x)
.attr("x2", x)
.style("stroke", "black")
.style("stroke-linecap", "round")
.style("stroke-width", 5);
var circle = canvas.append("circle")
.attr("r", radius)
.attr("cy", function(d) {
return d.y;
})
.attr("cx", function(d) {
return d.x;
})
.style("cursor", "ew-resize")
.call(drag);
function dragmove(d) {
var y = d3.event.y;
y = y < y1 ? y1 : y > y2 ? y2 : y;
d.y = y;
circle.attr("cy", y);
var value = circle.attr("cy");
text.text("value: " + ~~(100*(value-y1)/(y2-y1)) + "%")
}
<svg></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
Source: stackoverflow.com
Related Query
- D3 Sliders - Retrieving & Showing Values
- Trouble using DC.js (crossfilter and d3 convenience library) - bar chart not showing values
- Sort a list with D3 showing only unique values
- d3 stacked bar chart values not showing up on chart
- If x-axis labels are string values then they are not showing up in d3 chart
- Negative values not showing in grouped bar chart
- general update pattern III, update values not showing up
- Showing specific Tick values
- d3js - on `path` over how to show the `path` values instead of showing the `mouse` value?
- Dynamically Update Bar Chart in Javascript With Sliders Values
- c3.js not showing values on mouse hover
- Timeline just with years that shall be ordered and just showing per year how many values are available
- D3 Bar Chart Negative Values not Showing Up
- Unable to set X and Y, showing NaN values when adding a new node?
- d3 axis is not showing any values if there is only 1 value in the domain
- D3.js: Using images (with filenames specified in data) as tick values on axis
- Bar chart with negative values
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
- internet explorer 10 not showing svg path (d3.js graph)
- nvd3 line chart with string values on x-axis
- How to add in zero values into a time series in d3.js / JavaScript
- Pass null values to SVG path (using d3.js) to suppress missing data
- d3.nest() key and values conversion to name and children
- D3.js Chart: Labels (<text> Tags) Not Showing On IE11
- How do we change the tick values generated by a linear scale in a d3.js line plot?
- Display only whole values along y axis in d3.js when range is 0-1 or 0-2
- Retrieving Keys from JSON Array key-value pair dynamically - Javascript
- How to select unique values in d3.js from data
- How can I get numeric values instead of Logarthmic values in D3 axis scale?
- Nvd3: How prevent to display chart between -1 and 1 if have all y values 0?
More Query from same tag
- SVG tag defined in HTML vs Added by D3
- Sankey Diagram (D3) - How to use multiple units for link values and how to add notes to mouseover popup box?
- How do I find the associated DOM element when I have the Data object in D3?
- Axis for 1 day with a step of 10 mins in cubism
- d3 animating multiple lines the line can't be completed
- Visualizing data techniques for groups of data using d3.js
- Arrays that d3 accepts for linegraph
- CSS equivalent to .attr("data-html", "true")
- How to get the x and y axis on click Angular JS Charts?
- Transitions Out of DOM
- Move to Mouse Click in SVG path (d3.js)
- Best practice about detecting DOM element exist in D3
- D3 Javascript - Repeat a group of shapes with data bind
- Ionic D3.js piechart does not render
- Possible d3 Bug: dragend fires without any drag event
- how to make d3js donut chart supports ie8?
- On a Google maps overlay, how do I create lines between svg elements in D3
- Get the data for the entering selection in d3.js
- Download SVG as PNG, via a modal form(checkbox)
- How do you clear an SVG in d3.js in javascript
- How do I change the color of path in D3.js?
- how to use moment and date time in D3
- Cannot hide labels 'behind' spinning D3 Globe
- D3 update stacked bar chart based on non-constant amount of values in csv-file
- d3js bar chart with brush slider
- dc.js ordinal stacked barchart with two dimensions, getting NaN values and no stacked bar is displayed
- D3 bar chart not parsing csv
- getBoundingClientRect() returns the same values for all elements
- Removing a circle in d3 with a specific cx and cy values?
- How do I create a multiline chart using d3js with json formatted for nvd3?