score:2
You're getting that message because you're importing scaleLinear
into your config file, rather than your app. Remove that line from the config file and you won't get the warning.
Strictly speaking, your src/scripts/main.js
file should look like this:
import { scaleLinear } from 'd3-scale';
var yScale = scaleLinear() // <-- note there's no `d3.`
.domain([10, 1200])
.range([0, 500]);
console.log(yScale(1200)); // 500
In that case, you may need to tweak your config file, depending on what you want to do:
1. Bundle d3-scale into your app (recommended)
If you wanted to actually include d3-scale
and its dependencies in the bundle Rollup creates so that you don't need to load D3 as a separate <script>
tag, you would need to include the node-resolve plugin so that Rollup could find the d3-scale
source code to include it.
This is what you'll need to do if you don't want to include D3 from unpkg.com.
2. Tell Rollup what d3-scale is
At the moment your app works because window.d3
is assigned to D3. That's totally fine and will work (you wouldn't even need the import
declaration at all), but if you wanted to use the more idiomatic ES module approach without bundling d3-scale
then you would need to add the following to your config:
import babel from 'rollup-plugin-babel';
export default {
entry: 'src/scripts/main.js',
dest: 'build/js/main.min.js',
format: 'iife',
// tell Rollup that d3-scale is an external package
// and that it corresponds to `window.d3`
external: ['d3-scale'],
globals: {
'd3-scale': 'd3'
},
plugins: [
babel({
exclude: 'node_modules/**',
}),
],
};
Source: stackoverflow.com
Related Query
- Why 'scaleLinear' never used? and Why I have to included as a <script d3.v4.js>?
- Why do I have to re-assign the links and nodes when updating the d3.js force layout
- D3.js - why mouseover and mouse out fired for each child elements?
- Why are d3's select() and selectAll() behaving differently here?
- Could someone once and for all please explain Cannot call determinedVisibility() - never saw a connection for the pid
- Nvd3: How prevent to display chart between -1 and 1 if have all y values 0?
- Why are .domain, tickFormat and tickValues not recognised inside dimensions variable? (d3, parallel coordinates)
- Why is my tooltip flashing on and off?
- D3 ordinal scale only returning extremes. Why isn't it interpolating between range and domain?
- Why is there so much fuzz about d3 and alike?
- D3 Zoom with Scrollbars used as panning, Scrollbar width and height adjusts to zoom scale
- Why don't my TopoJSON lat and long points show on my US map?
- Why do the SVG properties of an SVG element sometimes show up as accessible and sometimes not?
- Understanding why three nested functions are used in .attrTween
- Why does the callback function called at the end and how to test the function?
- SVG dx+text-anchor middle have different behavior into chrome and firefox
- D3.js and nested data - Why is my exit() set empty
- d3.js axis - making it have 0 ticks and no markings
- Relationship between linear math transformation and scaleLinear D3 function
- Why does this vanilla js function return different results in d3v3 and d3v4
- How do I add bubbles on each of the y-axis values that I have and how do I add mouseover function for each of them?
- Why Do I need to use Custom Event for Tooltip and Brush in D3?
- Why D3 events that deal AngularJS models does not have effect in binding?
- can webpack output separate script and module files for browser and node?
- Why the graph lines are off axis Y and X?
- Using d3 drag, why doesn't dragstart have d3.event.x set?
- How to have the same scale in both x and y
- why the last tick doesn't have values - D3.js
- D3 is attempting to set attributes of SVG as NaN and I can't figure out why
- Why don't translate(${x},${y}) and translate(${-x},${-y}) cancel out?
More Query from same tag
- Using D3 to read data into associative arrays
- d3 select from angular
- Getting key and value of object
- How do I "register" a dragged group to specific coordinates with d3?
- Error: <path> attribute d: Expected number, "M67,0L67,0LNaN,0LNaN,0L728"
- Linear + threshold unified scale
- How to animate an element to follow an arc's centroid in d3?
- Plotting Labels on NVD3 scatterChart
- Text on top of d3 vertical stacked bar chart
- Adding a horizontal and vertical scroll bar for d3-2way-tree for multilevel tree
- NVD3 MultiBarChart Stacked Display with Non-Normalized Data
- Axis not ligning up to bars
- error in d3.js : t.map is not a function
- Change bar chart to line chart in D3
- d3 sankey diagram - how to set the y position
- Using 1 as minimum value for a Radar Chart
- d3.js ordinal axis is not updated correctly
- How to add single label per svg element?
- update series order in dimple multi-series chart with interactivity
- set zoom after each redraw
- ReferenceError: Can't find variable: d3 in new rails6 application with webpacker
- D3 Pie Chart Render Only Once In Side *NgFor Angular
- Adding event listeners into dynamically created elements
- D3 4.9.1 returns different value for .style("transform")
- Integrating tabletop.js with d3.js?
- Restricting d3.js zoom to container
- Importing csv, using D3.js and Javascript for a Line Graph
- How to modify and copy observablehq zoomable sunburst to a local machine and run?
- Is there a malformation in my GeoJSON or a bug in my D3 code?
- Modified object not indexing properly on mouse click function, javascript