score:2
Accepted answer
the css in the bootstrap col
has a min-height of 1px. d3plus
is parsing this height out and then failing to render the chart in 1px. you can fix this by specifying as explicit height:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://rawgit.com/alexandersimoes/d3plus/master/d3plus.full.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="col-lg-6">
<div id="exports"></div>
</div>
<script>
// sample data array
var trade_data = [
{"usd": 34590873460, "product": "oil"},
{"usd": 12897429187, "product": "cars"},
{"usd": 8974520985, "product": "airplanes"},
{"usd": 9872342, "product": "apples"},
{"usd": 6897234098, "product": "shoes"},
{"usd": 590834587, "product": "glass"},
{"usd": 987234261, "product": "horses"}
]
// instantiate d3plus
var visualization = d3plus.viz()
.container("#exports")
.data(trade_data)
.type("tree_map")
.id("product")
.size("usd")
.labels({"align": "left", "valign": "top"})
.height(250) //<-- explicit height
.draw()
</script>
</form>
</body>
</html>
Source: stackoverflow.com
Related Query
- Bootstrap doesn't let me use data with other libraries
- D3: use nest function to turn flat data with parent key into a hierarchy
- How can I use d3-scale-chromatic functions with a domain other than [0, 1]?
- Use d3 stack layout with data organized per points, instead of per layers
- d3 with bootstrap tooltip: titles not working with data updating
- When creating an HTML table with D3, use certain data for a row class rather than cell
- How to use the quantize function with my json data file
- How to use D3 to load csv, display table and style it with bootstrap in javascript
- How to use d3 with bootstrap
- how to convert data selected from a postgres database to json or csv to use it with d3js lib?
- "Cartograms with d3 " how to use data from MySQL?
- Formatting data for use with JSON and D3.js
- How to use attr fill with scalesqrt using data from another json file?
- How do I use MongoDB data with D3 and Node?
- How do I use JSON and return data with D3
- How to load multiple csv files and use them mixed with each other
- Basic D3.js: how to bind data with other attributes to elements?
- How to use .defer with an internal data object d3 topoJSON map?
- How to use this data with D3js Scatter Plot?
- In D3, how to use SVG files as DOM objects with bound data and paths still exposed?
- How to add all data to my array to use with a color scale?
- How to use d3.js chart with data from coingeckoapi (json)
- How to use d3.js Hierarchy with custom data structure?
- How to use NVD3 with rCharts in R with non numeric data
- D3.js how to use hierarchical layouts with embedded non hierarchical data
- how to deal with unique data use d3.js?
- Appending multiple non-nested elements for each data member with D3.js
- How to use D3 selectAll with multiple class names
- D3 - how to deal with JSON data structures?
- How do I show a bootstrap tooltip with an SVG object?
More Query from same tag
- Why the data can't be bind with JSON file?
- d3js chart dots and area not updating
- D3 conditionally append image OR circle element based on variable
- Loop over JSON data to create d3 pie charts
- d3 transitions in Ember when Ember takes care of data joins
- How can I transform an existing d3 area into a stacked area?
- Links never show up
- multi line chart nvd3 not shown properly
- D3 treemap node order
- Does D3 support multiple brushes on the same line chart?
- plotting multi dimensions in DC for D3
- Wrapping text, using call function to pass data
- d3.layout.histogram() returning wrong output
- D3.js DOM manipulation with dynamic siblings
- D3 selection via mouseover
- D3.js TreeMap - Error: <rect> attribute width: Expected length, "NaN"
- d3.js collapsible force diagram - assigning unique ID's to identical nodes
- Why doesn't my geo LineString follow latitude/graticule curves?
- d3.js doesn't work for some reason
- How can I render a d3.arc with different colors for different percentage?
- Force directed graph with circular group levels
- Undefined is not a function - JAVASCRIPT - D3
- D3 draw children paths under parents
- Parse filtered data with D3
- C3.js custom tool tip animation onmouseover
- Freezing force directed network graph and make draggable in D3
- Making charts clickable
- on which parameters depend requestAnimationFrame? -- slowness
- D3.js grouped bar chart
- How to use d3.js darker color method