fix(options): Correct when bindto element not exist

When given 'bindto' selector element not exist or not given option value, it'll add <div> element Fix #743 Close #749
naver · Jan 25, 2019 · 448a45d · 448a45d
1 parent fc65a59
commit 448a45d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/spec/internals/bb-spec.js b/spec/internals/bb-spec.js
@@ -56,6 +56,19 @@ describe("Interface & initialization", () => {
 		});
 	});
 
+	it("instantiate with non-existing element", () => {
+		chart = util.generate({
+			bindto: "#no-exist-element",
+			data: {
+				columns: [
+					["data1", 30]
+				]
+			}
+		});
+
+		expect(chart.element.classList.contains("bb")).to.be.true;
+	});
+
 	it("instantiate with different classname on wrapper element", () => {
 		const bindtoClassName = "billboard-js";
 		chart = bb.generate({

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -12,9 +12,9 @@ export default class Options {
 	constructor() {
 		return {
 			/**
-			 * Specify the CSS selector or the element which the chart will be set to. D3 selection object can be specified also.
-			 * If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).<br><br>
-			 * If this option is not specified, the chart will be generated but not be set. Instead, we can access the element by chart.element and set it by ourselves.<br>
+			 * Specify the CSS selector or the element which the chart will be set to. D3 selection object can be specified also.<br>
+			 * If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).
+			 * - **NOTE:** In case of element doesn't exist or not specified, will add a `<div>` element to the body.
 			 * @name bindto
 			 * @memberof Options
 			 * @property {String|HTMLElement|d3.selection} bindto=#chart Specify the element where chart will be drawn.

diff --git a/src/internals/ChartInternal.js b/src/internals/ChartInternal.js
@@ -195,7 +195,11 @@ export default class ChartInternal {
 
 		// select bind element
 		$$.selectChart = isFunction(bindto.element.node) ?
-			config.bindto.element : d3Select(!bindto.element ? [] : bindto.element);
+			config.bindto.element : d3Select(bindto.element || []);
+
+		if ($$.selectChart.empty()) {
+			$$.selectChart = d3Select(document.body.appendChild(document.createElement("div")));
+		}
 
 		$$.selectChart.html("").classed(bindto.classname, true);
 

diff --git a/types/options.d.ts b/types/options.d.ts
@@ -9,8 +9,7 @@ export interface ChartOptions {
 	/**
 	 * Specify the CSS selector or the element which the chart will be set to. D3 selection object can be specified also.
 	 * If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).
-	 * If this option is not specified, the chart will be generated but not be set.
-	 * Instead, we can access the element by chart.element and set it by ourselves.
+	 * - **NOTE:** In case of element doesn't exist or not specified, will add a `<div>` element to the body.
 	 */
 	bindto?: string | HTMLElement | d3Selection | null | {
 		/**