score:1
Accepted answer
You have to prepare the data for the fisheye plugin:
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.datum( function(d) {
return {x: d.pages, y: d.books} // change data, to feed to the fisheye plugin
})
.attr("cx", function (d) {return d.x}) // changed data can be used here as well
.attr("cy", function (d) {return d.y}) // ...and here
.attr("r", 2);
...
// now we can pass in the d.x and d.y values expected by the fisheye plugin...
circles.each(function(d) { d.fisheye = fisheye(d); })
.attr("cx", function(d) { return d.fisheye.x; })
.attr("cy", function(d) { return d.fisheye.y; })
.attr("r", function(d) { return d.fisheye.z * 2; });
});
I also made changes to the declaration of the fisheye in accordance with the latest official version of the plugin which I used in the plunk linked below.
So, here is a PLUNK with the fisheye distortion applied to the scatterplot.
Source: stackoverflow.com
Related Query
- D3 Fisheye Distortion on simple Scatter plot
- Create simple scatter plot with Dimple
- Using D3 transition method with data for scatter plot
- Change size of bubble in Scatter Plot for c3.js
- d3.js scatter plot - zoom/drag boundaries, zoom buttons, reset zoom, calculate median
- D3js Grouped Scatter plot with no collision
- nvd3 scatter plot with ordinal scale
- d3.js zoom/drag scatter plot
- how do you draw linear line in scatter plot with d3.js
- How can I plot positive and negative values for both axes in a scatter plot with d3?
- transformation issues when implementing fisheye distortion in a radial tree
- Making an interactive scatter plot with d3?
- Create an interactive 3d scatter plot with D3.js and Three.js with json data
- Weird behaviour of Fisheye Distortion plugin
- Moving scatter plot circles with context zooming and brush in D3
- D3: Most populous areas of a scatter plot
- Adding label on a D3 scatter plot circles
- javascript polar scatter plot using d3.js
- Add a transition to a d3j scatter plot
- dc scatter plot binding onClick event
- How to detect overlapping dots in a scatter plot using D3?
- How can I identify scatter plot data points that are included in a D3 brush?
- D3 scatter plot - visible points outside the chart after zoom
- How to add labels to c3.js scatter plot graph?
- Plot regression line on a scatter plot from regression coefficients
- Display tooltip close to the mouse pointer using d3.js in a scatter plot
- Focus+Context via Brushing for scatter plot in d3
- How to use d3 to plot/add node on scatter plot one by one?
- Add tooltip to d3 scatter plot
- Basic math 101 scatter plot with Plottable.js
More Query from same tag
- d3 line does not draw
- Load csv file in d3.js using absolute path
- Re-scale axis when zoomed
- D3 Uncaught TypeError: Cannot read property 'age' of undefined
- How to add CSS on SVG file in io.js ?
- d3.js external json file
- Changing size of D3 tick marks based on tick value
- Puppeteer takes blurry screenshots of SVG
- How to make the NVD3 discreteBarChart labels on the X axis to adapt to the width or to the number of labels?
- dbclick more than once functionality not working force-directed graph d3.js
- D3js v4. How to determine custom event?
- dc.js - queries related to axis
- Animating a continuous line horiizontally and vertically
- D3.js nesting and rollup at same time
- point in polygon using leaflet-pip and d3.geoContains
- Google maps linked to d3 chart
- How to play audio on mouseover?
- custom ordering in custom reduce functions in dc.js crossfilter.js
- j query context menu for d3 rect
- Focus on form field after animation
- unable to plot polygons in d3.js "format" over leaflet.js
- D3.js: Context + Focus zoom on multiple graphs
- Filtering array in d3
- Log the x,y coordinates of nodes in a converged D3 force layout
- Rotate Labels in d3 sunburst v4
- d3 Bilevel Partition - equal parts
- Draw 5 way diagram using d3.js
- d3.js: chronological time view
- Adding tooltip and focus guides for x and y2 axis on multi-axis linechart in d3
- C3.js change label position of Line Chart Y axis to center up of Y axis