Value is correct in text but incorrect in .attr() or .html()
0
I have created a dynamic filter which filters the results in a side div. Note that I am using D3 in my code.
My problem is that I can present the text of the selection in the div but I cannot create a link that will redirect to another page. In the first snippet, the value is set to undefined. In the second snippet, I cannot present the a href tag at all.
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html(function(d,i)
//console.log(d);
return '<a href="https://www.random.com/' + d + '">'+ d +'</a>';
)
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>Another snippet:
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.append("a")
.attr("xlink:href": "#")
.append("text")
.text(function(d, i) return d; );
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>UPD:
It can work if I change the tag from p to a and use the following code in the JS bit:
d3.select(".g-hed")
.attr( "xlink:href": "http://example.com/" + d )
.text(d);
};
javascript d3.js
edited Nov 15 '18 at 1:07
Gerardo Furtado
65.1k64789
asked Nov 14 '18 at 15:12
Apolo RadomerApolo Radomer
1,25622355
add a comment |
0
I have created a dynamic filter which filters the results in a side div. Note that I am using D3 in my code.
My problem is that I can present the text of the selection in the div but I cannot create a link that will redirect to another page. In the first snippet, the value is set to undefined. In the second snippet, I cannot present the a href tag at all.
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html(function(d,i)
//console.log(d);
return '<a href="https://www.random.com/' + d + '">'+ d +'</a>';
)
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>Another snippet:
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.append("a")
.attr("xlink:href": "#")
.append("text")
.text(function(d, i) return d; );
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>UPD:
It can work if I change the tag from p to a and use the following code in the JS bit:
d3.select(".g-hed")
.attr( "xlink:href": "http://example.com/" + d )
.text(d);
};
javascript d3.js
edited Nov 15 '18 at 1:07
Gerardo Furtado
65.1k64789
asked Nov 14 '18 at 15:12
Apolo RadomerApolo Radomer
1,25622355
add a comment |
0
0
0
I have created a dynamic filter which filters the results in a side div. Note that I am using D3 in my code.
My problem is that I can present the text of the selection in the div but I cannot create a link that will redirect to another page. In the first snippet, the value is set to undefined. In the second snippet, I cannot present the a href tag at all.
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html(function(d,i)
//console.log(d);
return '<a href="https://www.random.com/' + d + '">'+ d +'</a>';
)
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>Another snippet:
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.append("a")
.attr("xlink:href": "#")
.append("text")
.text(function(d, i) return d; );
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>UPD:
It can work if I change the tag from p to a and use the following code in the JS bit:
d3.select(".g-hed")
.attr( "xlink:href": "http://example.com/" + d )
.text(d);
};
javascript d3.js
edited Nov 15 '18 at 1:07
Gerardo Furtado
65.1k64789
asked Nov 14 '18 at 15:12
Apolo RadomerApolo Radomer
1,25622355
I have created a dynamic filter which filters the results in a side div. Note that I am using D3 in my code.
My problem is that I can present the text of the selection in the div but I cannot create a link that will redirect to another page. In the first snippet, the value is set to undefined. In the second snippet, I cannot present the a href tag at all.
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html(function(d,i)
//console.log(d);
return '<a href="https://www.random.com/' + d + '">'+ d +'</a>';
)
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>Another snippet:
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.append("a")
.attr("xlink:href": "#")
.append("text")
.text(function(d, i) return d; );
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>UPD:
It can work if I change the tag from p to a and use the following code in the JS bit:
d3.select(".g-hed")
.attr( "xlink:href": "http://example.com/" + d )
.text(d);
};
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html(function(d,i)
//console.log(d);
return '<a href="https://www.random.com/' + d + '">'+ d +'</a>';
)
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html(function(d,i)
//console.log(d);
return '<a href="https://www.random.com/' + d + '">'+ d +'</a>';
)
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.append("a")
.attr("xlink:href": "#")
.append("text")
.text(function(d, i) return d; );
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.append("a")
.attr("xlink:href": "#")
.append("text")
.text(function(d, i) return d; );
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>javascript d3.js
javascript d3.js
edited Nov 15 '18 at 1:07
Gerardo Furtado
65.1k64789
asked Nov 14 '18 at 15:12
Apolo RadomerApolo Radomer
1,25622355
edited Nov 15 '18 at 1:07
Gerardo Furtado
65.1k64789
asked Nov 14 '18 at 15:12
Apolo RadomerApolo Radomer
1,25622355
edited Nov 15 '18 at 1:07
Gerardo Furtado
65.1k64789
edited Nov 15 '18 at 1:07
Gerardo Furtado
65.1k64789
edited Nov 15 '18 at 1:07
Gerardo Furtado
65.1k64789
65.1k64789
asked Nov 14 '18 at 15:12
Apolo RadomerApolo Radomer
1,25622355
asked Nov 14 '18 at 15:12
Apolo RadomerApolo Radomer
1,25622355
asked Nov 14 '18 at 15:12
Apolo RadomerApolo Radomer
1,25622355
1,25622355
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
There is no data bound to those .g-intro paragraphs. Therefore, the first argument (d) in the anonymous function inside the html method is undefined.
Just use the first argument passed to the outer function itself, which is the datum you want:
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
By the way, the text shows correctly because in the text method you're using the argument passed to the outer function (text(d)), not an argument passed to an anonymous function inside it (text(function(d)return d)).
Here is your first snippet with that change:
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>answered Nov 15 '18 at 1:07
Gerardo FurtadoGerardo Furtado
65.1k64789
add a comment |
0
var json_data =
"headers": ["Week", "Web Page", "Image", "Number"],
"rows": [
["2018-09-24 00:00:00.0", "/blue", "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", 193],
["2018-10-08 00:00:00.0", "/red", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", 127],
["2018-09-17 00:00:00.0", "/green", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg", 87]
]
;
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [
["/blue", "/red", "/green"],
["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]
];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d, i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = [
"date": "2018-09-24",
"Value": "/blue",
"num": 193,
"img": "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png"
,
"date": "2018-10-08",
"Value": "/red",
"num": 127,
"img": "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830"
,
"date": "2018-09-17",
"Value": "/green",
"num": 87,
"img": "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"
];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
var gHed = d3.select(".g-hed")
gHed.html("");
gHed
.append('a')
.attr(
"xlink:href": '#' + d
)
.text(d);
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);
body
font-family: Karla, sans-serif;
font-size: 18px;
overflow: hidden;
color: #555
.flex-container
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around
.flex-item1,
.flex-item2
height: auto;
margin-top: 10px;
font-weight: 700;
text-align: center
.flex-item1
width: 33%
.flex-item2
width: 67%
ul
padding: 0;
list-style-type: none
.selector li
padding: 0;
margin: 0 0 30px
.active img
opacity: .5;
filter: alpha(opacity=50)
.selector
max-height: 440px;
overflow: auto
li .selector
cursor: auto
li .selector img
width: auto;
height: 100%;
max-height: 80px
ul::-webkit-scrollbar
width: .8em
.selector::-webkit-scrollbar-track
-webkit-box-shadow: inset 0 0 6px #F5F5F5;
background-color: #F5F5F5
.selector::-webkit-scrollbar-thumb
background-color: #c7003b
.siteText
font-size: 2vw
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>answered Nov 14 '18 at 16:10
ksavksav
5,34921331
Your snippet does not work. Possible bad paste that changed a character (guessing it is the quotes)
– Apolo Radomer
Nov 14 '18 at 16:22
Oops. Could have been the es6 template string notation. (Edited)
– ksav
Nov 14 '18 at 16:30
Still didn't work. I can see the a tag in the console but the text overrides it so I cannot click on the link.
– Apolo Radomer
Nov 15 '18 at 13:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53303330%2fvalue-is-correct-in-text-but-incorrect-in-attr-or-html%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
There is no data bound to those .g-intro paragraphs. Therefore, the first argument (d) in the anonymous function inside the html method is undefined.
Just use the first argument passed to the outer function itself, which is the datum you want:
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
By the way, the text shows correctly because in the text method you're using the argument passed to the outer function (text(d)), not an argument passed to an anonymous function inside it (text(function(d)return d)).
Here is your first snippet with that change:
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>answered Nov 15 '18 at 1:07
Gerardo FurtadoGerardo Furtado
65.1k64789
add a comment |
0
There is no data bound to those .g-intro paragraphs. Therefore, the first argument (d) in the anonymous function inside the html method is undefined.
Just use the first argument passed to the outer function itself, which is the datum you want:
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
By the way, the text shows correctly because in the text method you're using the argument passed to the outer function (text(d)), not an argument passed to an anonymous function inside it (text(function(d)return d)).
Here is your first snippet with that change:
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>answered Nov 15 '18 at 1:07
Gerardo FurtadoGerardo Furtado
65.1k64789
add a comment |
0
0
0
There is no data bound to those .g-intro paragraphs. Therefore, the first argument (d) in the anonymous function inside the html method is undefined.
Just use the first argument passed to the outer function itself, which is the datum you want:
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
By the way, the text shows correctly because in the text method you're using the argument passed to the outer function (text(d)), not an argument passed to an anonymous function inside it (text(function(d)return d)).
Here is your first snippet with that change:
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>answered Nov 15 '18 at 1:07
Gerardo FurtadoGerardo Furtado
65.1k64789
There is no data bound to those .g-intro paragraphs. Therefore, the first argument (d) in the anonymous function inside the html method is undefined.
Just use the first argument passed to the outer function itself, which is the datum you want:
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
By the way, the text shows correctly because in the text method you're using the argument passed to the outer function (text(d)), not an argument passed to an anonymous function inside it (text(function(d)return d)).
Here is your first snippet with that change:
var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>var json_data = "headers":["Week","Web Page","Image","Number"],"rows":[["2018-09-24 00:00:00.0","/blue","https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png",193],["2018-10-08 00:00:00.0","/red","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830",127],["2018-09-17 00:00:00.0","/green","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg",87]];
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [["/blue","/red","/green"],["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d,i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = ["date":"2018-09-24","Value":"/blue","num":193,"img":"https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png","date":"2018-10-08","Value":"/red","num":127,"img":"https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830","date":"2018-09-17","Value":"/green","num":87,"img":"https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
d3.select(".g-hed").text(d);
d3.select(".g-intro")
.html('<a href="https://www.random.com/' + d + '">'+ d +'</a>')
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);bodyfont-family:Karla,sans-serif;font-size:18px;overflow:hidden;color:#555.flex-containerpadding:0;margin:0;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;justify-content:space-around.flex-item1,.flex-item2height:auto;margin-top:10px;font-weight:700;text-align:center.flex-item1width:33%.flex-item2width:67%ulpadding:0;list-style-type:none.selector lipadding:0;margin:0 0 30px.active imgopacity:.5;filter:alpha(opacity=50).selectormax-height:440px;overflow:autoli .selectorcursor:autoli .selector imgwidth:auto;height:100%;max-height:80pxul::-webkit-scrollbarwidth:.8em.selector::-webkit-scrollbar-track-webkit-box-shadow:inset 0 0 6px #F5F5F5;background-color:#F5F5F5.selector::-webkit-scrollbar-thumbbackground-color:#c7003b.siteTextfont-size:2vw<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>answered Nov 15 '18 at 1:07
Gerardo FurtadoGerardo Furtado
65.1k64789
edited Nov 15 '18 at 1:16
answered Nov 15 '18 at 1:07
Gerardo FurtadoGerardo Furtado
65.1k64789
answered Nov 15 '18 at 1:07
Gerardo FurtadoGerardo Furtado
65.1k64789
answered Nov 15 '18 at 1:07
Gerardo FurtadoGerardo Furtado
65.1k64789
65.1k64789
add a comment |
add a comment |
0
var json_data =
"headers": ["Week", "Web Page", "Image", "Number"],
"rows": [
["2018-09-24 00:00:00.0", "/blue", "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", 193],
["2018-10-08 00:00:00.0", "/red", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", 127],
["2018-09-17 00:00:00.0", "/green", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg", 87]
]
;
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [
["/blue", "/red", "/green"],
["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]
];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d, i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = [
"date": "2018-09-24",
"Value": "/blue",
"num": 193,
"img": "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png"
,
"date": "2018-10-08",
"Value": "/red",
"num": 127,
"img": "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830"
,
"date": "2018-09-17",
"Value": "/green",
"num": 87,
"img": "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"
];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
var gHed = d3.select(".g-hed")
gHed.html("");
gHed
.append('a')
.attr(
"xlink:href": '#' + d
)
.text(d);
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);
body
font-family: Karla, sans-serif;
font-size: 18px;
overflow: hidden;
color: #555
.flex-container
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around
.flex-item1,
.flex-item2
height: auto;
margin-top: 10px;
font-weight: 700;
text-align: center
.flex-item1
width: 33%
.flex-item2
width: 67%
ul
padding: 0;
list-style-type: none
.selector li
padding: 0;
margin: 0 0 30px
.active img
opacity: .5;
filter: alpha(opacity=50)
.selector
max-height: 440px;
overflow: auto
li .selector
cursor: auto
li .selector img
width: auto;
height: 100%;
max-height: 80px
ul::-webkit-scrollbar
width: .8em
.selector::-webkit-scrollbar-track
-webkit-box-shadow: inset 0 0 6px #F5F5F5;
background-color: #F5F5F5
.selector::-webkit-scrollbar-thumb
background-color: #c7003b
.siteText
font-size: 2vw
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>answered Nov 14 '18 at 16:10
ksavksav
5,34921331
Your snippet does not work. Possible bad paste that changed a character (guessing it is the quotes)
– Apolo Radomer
Nov 14 '18 at 16:22
Oops. Could have been the es6 template string notation. (Edited)
– ksav
Nov 14 '18 at 16:30
Still didn't work. I can see the a tag in the console but the text overrides it so I cannot click on the link.
– Apolo Radomer
Nov 15 '18 at 13:09
add a comment |
0
var json_data =
"headers": ["Week", "Web Page", "Image", "Number"],
"rows": [
["2018-09-24 00:00:00.0", "/blue", "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", 193],
["2018-10-08 00:00:00.0", "/red", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", 127],
["2018-09-17 00:00:00.0", "/green", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg", 87]
]
;
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [
["/blue", "/red", "/green"],
["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]
];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d, i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = [
"date": "2018-09-24",
"Value": "/blue",
"num": 193,
"img": "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png"
,
"date": "2018-10-08",
"Value": "/red",
"num": 127,
"img": "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830"
,
"date": "2018-09-17",
"Value": "/green",
"num": 87,
"img": "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"
];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
var gHed = d3.select(".g-hed")
gHed.html("");
gHed
.append('a')
.attr(
"xlink:href": '#' + d
)
.text(d);
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);
body
font-family: Karla, sans-serif;
font-size: 18px;
overflow: hidden;
color: #555
.flex-container
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around
.flex-item1,
.flex-item2
height: auto;
margin-top: 10px;
font-weight: 700;
text-align: center
.flex-item1
width: 33%
.flex-item2
width: 67%
ul
padding: 0;
list-style-type: none
.selector li
padding: 0;
margin: 0 0 30px
.active img
opacity: .5;
filter: alpha(opacity=50)
.selector
max-height: 440px;
overflow: auto
li .selector
cursor: auto
li .selector img
width: auto;
height: 100%;
max-height: 80px
ul::-webkit-scrollbar
width: .8em
.selector::-webkit-scrollbar-track
-webkit-box-shadow: inset 0 0 6px #F5F5F5;
background-color: #F5F5F5
.selector::-webkit-scrollbar-thumb
background-color: #c7003b
.siteText
font-size: 2vw
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>answered Nov 14 '18 at 16:10
ksavksav
5,34921331
Your snippet does not work. Possible bad paste that changed a character (guessing it is the quotes)
– Apolo Radomer
Nov 14 '18 at 16:22
Oops. Could have been the es6 template string notation. (Edited)
– ksav
Nov 14 '18 at 16:30
Still didn't work. I can see the a tag in the console but the text overrides it so I cannot click on the link.
– Apolo Radomer
Nov 15 '18 at 13:09
add a comment |
0
0
0
var json_data =
"headers": ["Week", "Web Page", "Image", "Number"],
"rows": [
["2018-09-24 00:00:00.0", "/blue", "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", 193],
["2018-10-08 00:00:00.0", "/red", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", 127],
["2018-09-17 00:00:00.0", "/green", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg", 87]
]
;
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [
["/blue", "/red", "/green"],
["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]
];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d, i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = [
"date": "2018-09-24",
"Value": "/blue",
"num": 193,
"img": "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png"
,
"date": "2018-10-08",
"Value": "/red",
"num": 127,
"img": "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830"
,
"date": "2018-09-17",
"Value": "/green",
"num": 87,
"img": "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"
];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
var gHed = d3.select(".g-hed")
gHed.html("");
gHed
.append('a')
.attr(
"xlink:href": '#' + d
)
.text(d);
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);
body
font-family: Karla, sans-serif;
font-size: 18px;
overflow: hidden;
color: #555
.flex-container
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around
.flex-item1,
.flex-item2
height: auto;
margin-top: 10px;
font-weight: 700;
text-align: center
.flex-item1
width: 33%
.flex-item2
width: 67%
ul
padding: 0;
list-style-type: none
.selector li
padding: 0;
margin: 0 0 30px
.active img
opacity: .5;
filter: alpha(opacity=50)
.selector
max-height: 440px;
overflow: auto
li .selector
cursor: auto
li .selector img
width: auto;
height: 100%;
max-height: 80px
ul::-webkit-scrollbar
width: .8em
.selector::-webkit-scrollbar-track
-webkit-box-shadow: inset 0 0 6px #F5F5F5;
background-color: #F5F5F5
.selector::-webkit-scrollbar-thumb
background-color: #c7003b
.siteText
font-size: 2vw
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>answered Nov 14 '18 at 16:10
ksavksav
5,34921331
var json_data =
"headers": ["Week", "Web Page", "Image", "Number"],
"rows": [
["2018-09-24 00:00:00.0", "/blue", "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", 193],
["2018-10-08 00:00:00.0", "/red", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", 127],
["2018-09-17 00:00:00.0", "/green", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg", 87]
]
;
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [
["/blue", "/red", "/green"],
["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]
];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d, i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = [
"date": "2018-09-24",
"Value": "/blue",
"num": 193,
"img": "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png"
,
"date": "2018-10-08",
"Value": "/red",
"num": 127,
"img": "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830"
,
"date": "2018-09-17",
"Value": "/green",
"num": 87,
"img": "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"
];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
var gHed = d3.select(".g-hed")
gHed.html("");
gHed
.append('a')
.attr(
"xlink:href": '#' + d
)
.text(d);
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);
body
font-family: Karla, sans-serif;
font-size: 18px;
overflow: hidden;
color: #555
.flex-container
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around
.flex-item1,
.flex-item2
height: auto;
margin-top: 10px;
font-weight: 700;
text-align: center
.flex-item1
width: 33%
.flex-item2
width: 67%
ul
padding: 0;
list-style-type: none
.selector li
padding: 0;
margin: 0 0 30px
.active img
opacity: .5;
filter: alpha(opacity=50)
.selector
max-height: 440px;
overflow: auto
li .selector
cursor: auto
li .selector img
width: auto;
height: 100%;
max-height: 80px
ul::-webkit-scrollbar
width: .8em
.selector::-webkit-scrollbar-track
-webkit-box-shadow: inset 0 0 6px #F5F5F5;
background-color: #F5F5F5
.selector::-webkit-scrollbar-thumb
background-color: #c7003b
.siteText
font-size: 2vw
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>var json_data =
"headers": ["Week", "Web Page", "Image", "Number"],
"rows": [
["2018-09-24 00:00:00.0", "/blue", "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", 193],
["2018-10-08 00:00:00.0", "/red", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", 127],
["2018-09-17 00:00:00.0", "/green", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg", 87]
]
;
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [
["/blue", "/red", "/green"],
["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]
];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d, i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = [
"date": "2018-09-24",
"Value": "/blue",
"num": 193,
"img": "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png"
,
"date": "2018-10-08",
"Value": "/red",
"num": 127,
"img": "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830"
,
"date": "2018-09-17",
"Value": "/green",
"num": 87,
"img": "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"
];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
var gHed = d3.select(".g-hed")
gHed.html("");
gHed
.append('a')
.attr(
"xlink:href": '#' + d
)
.text(d);
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);
body
font-family: Karla, sans-serif;
font-size: 18px;
overflow: hidden;
color: #555
.flex-container
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around
.flex-item1,
.flex-item2
height: auto;
margin-top: 10px;
font-weight: 700;
text-align: center
.flex-item1
width: 33%
.flex-item2
width: 67%
ul
padding: 0;
list-style-type: none
.selector li
padding: 0;
margin: 0 0 30px
.active img
opacity: .5;
filter: alpha(opacity=50)
.selector
max-height: 440px;
overflow: auto
li .selector
cursor: auto
li .selector img
width: auto;
height: 100%;
max-height: 80px
ul::-webkit-scrollbar
width: .8em
.selector::-webkit-scrollbar-track
-webkit-box-shadow: inset 0 0 6px #F5F5F5;
background-color: #F5F5F5
.selector::-webkit-scrollbar-thumb
background-color: #c7003b
.siteText
font-size: 2vw
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>var json_data =
"headers": ["Week", "Web Page", "Image", "Number"],
"rows": [
["2018-09-24 00:00:00.0", "/blue", "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", 193],
["2018-10-08 00:00:00.0", "/red", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", 127],
["2018-09-17 00:00:00.0", "/green", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg", 87]
]
;
var dataRows = json_data.rows;
/* ----- !Data ----- */
/* ----- Functions ----- */
//Filter creation function
filterCreation = () =>
//Clear the filter in case of reload
d3.select(".selector").remove();
// Get names of unique Values, for filter list
var values = [
["/blue", "/red", "/green"],
["https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png", "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830", "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"]
];
var filter = d3.select("#filter")
.insert("ul", "svg")
.classed('selector', true)
filter.selectAll("li")
.data(values[0])
.enter().append("li")
.html(function(d, i)
return '<img src="' + values[1][i] + '"/><br><span class="siteText">' + values[0][i] + '</span>';
)
.on("click", filterSelect);
//Filter Select function. It updates the data, after selecting one option from the filter list
var filterSelect = function(d)
data = [
"date": "2018-09-24",
"Value": "/blue",
"num": 193,
"img": "https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png"
,
"date": "2018-10-08",
"Value": "/red",
"num": 127,
"img": "https://vignette.wikia.nocookie.net/rainbows/images/5/5a/Red.jpg/revision/latest?cb=20111028211830"
,
"date": "2018-09-17",
"Value": "/green",
"num": 87,
"img": "https://www.creativeglassshop.co.uk/userfiles/productlargeimages/product_2747.jpg"
];
d3.select("svg").remove();
const newData = data.filter(function(item)
return item.Value == d;
);
// get the parent ul element, remove `active` class from children
this.parentNode.childNodes.forEach((e) =>
e.classList.remove('active');
);
// mark this node as active
this.classList.add('active');
//Appends chart headline
var gHed = d3.select(".g-hed")
gHed.html("");
gHed
.append('a')
.attr(
"xlink:href": '#' + d
)
.text(d);
;
/* ----- !Functions ----- */
/* ----- Main ----- */
filterCreation();@import url(https://fonts.googleapis.com/css?family=Karla);
body
font-family: Karla, sans-serif;
font-size: 18px;
overflow: hidden;
color: #555
.flex-container
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around
.flex-item1,
.flex-item2
height: auto;
margin-top: 10px;
font-weight: 700;
text-align: center
.flex-item1
width: 33%
.flex-item2
width: 67%
ul
padding: 0;
list-style-type: none
.selector li
padding: 0;
margin: 0 0 30px
.active img
opacity: .5;
filter: alpha(opacity=50)
.selector
max-height: 440px;
overflow: auto
li .selector
cursor: auto
li .selector img
width: auto;
height: 100%;
max-height: 80px
ul::-webkit-scrollbar
width: .8em
.selector::-webkit-scrollbar-track
-webkit-box-shadow: inset 0 0 6px #F5F5F5;
background-color: #F5F5F5
.selector::-webkit-scrollbar-thumb
background-color: #c7003b
.siteText
font-size: 2vw
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<ul class="flex-container">
<li class="flex-item1">
<div id="filter"></div>
</li>
<li class="flex-item2">
<p class="g-intro"></p>
<p class="g-hed"></p>
<div class="g-chart"></div>
</li>
</ul>answered Nov 14 '18 at 16:10
ksavksav
5,34921331
edited Nov 14 '18 at 16:30
answered Nov 14 '18 at 16:10
ksavksav
5,34921331
answered Nov 14 '18 at 16:10
ksavksav
5,34921331
answered Nov 14 '18 at 16:10
ksavksav
5,34921331
5,34921331
Your snippet does not work. Possible bad paste that changed a character (guessing it is the quotes)
– Apolo Radomer
Nov 14 '18 at 16:22
Oops. Could have been the es6 template string notation. (Edited)
– ksav
Nov 14 '18 at 16:30
Still didn't work. I can see the a tag in the console but the text overrides it so I cannot click on the link.
– Apolo Radomer
Nov 15 '18 at 13:09
add a comment |
Your snippet does not work. Possible bad paste that changed a character (guessing it is the quotes)
– Apolo Radomer
Nov 14 '18 at 16:22
Oops. Could have been the es6 template string notation. (Edited)
– ksav
Nov 14 '18 at 16:30
Still didn't work. I can see the a tag in the console but the text overrides it so I cannot click on the link.
– Apolo Radomer
Nov 15 '18 at 13:09
Your snippet does not work. Possible bad paste that changed a character (guessing it is the quotes)
– Apolo Radomer
Nov 14 '18 at 16:22
Your snippet does not work. Possible bad paste that changed a character (guessing it is the quotes)
– Apolo Radomer
Nov 14 '18 at 16:22
Oops. Could have been the es6 template string notation. (Edited)
– ksav
Nov 14 '18 at 16:30
Oops. Could have been the es6 template string notation. (Edited)
– ksav
Nov 14 '18 at 16:30
Still didn't work. I can see the a tag in the console but the text overrides it so I cannot click on the link.
– Apolo Radomer
Nov 15 '18 at 13:09
Still didn't work. I can see the a tag in the console but the text overrides it so I cannot click on the link.
– Apolo Radomer
Nov 15 '18 at 13:09
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53303330%2fvalue-is-correct-in-text-but-incorrect-in-attr-or-html%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
