Update Angular and SASS agreed on supporting ::ng-deep (instead of >>> or /deep/) a while ago until ::slotted or whatever makes it into browser standards becomes available in all browsers. ViewEncapsulation.Emulated (default) That’s by design. Angular adds class names unique to components and rewrites the added styles to only apply to the components where they … Read more
can I create a flowchart like this one? D3 is capable of doing it. starting form a json object using the D3.js library? Yes What should the json structure look like? Depends on how you approach the project. I’m using force layout and removing the force, so my JSON is {node: [{ id: 1, title: … Read more
No. The purpose of the data-join is to synchronize elements with data, creating, removing or updating elements as necessary. If you create elements twice, the elements will no longer correspond one-to-one with the bound array of data. If you want two elements to correspond to each datum, then append a group (G) element first to … Read more
It is quite easy, just add some more “key” : “value” pairs. Example: “children”: [ { “name”: “Google”, “size”: 3938, “url”: “https://www.google.com” }, { “name”: “Bing”, “size”: 3938, “url”: “http://www.bing.com” } ] Of course, in your d3 code you then need to append <svg:a> tags and set their xlink:href attribute. Here is some html and … Read more
I wouldn’t have expected this to work, but it looks like D3 will sub-select any element that is a child of the selection and matches the selector – so this works: d3.select(this).selectAll(‘div > ul’); See http://jsfiddle.net/g3aay/2/
I ended up with one of the Lars Kotthoff’s advices. Every time when I call(axis) I also adjust text labels. Here is simplified code: function renderAxis() { axisContainer .transition().duration(300) .call(axis) // draw the standart d3 axis .call(adjustTextLabels); // adjusts text labels on the axis } function adjustTextLabels(selection) { selection.selectAll(‘.major text’) .attr(‘transform’, ‘translate(‘ + daysToPixels(1) / … Read more
for remote data.json replace : d3.tsv(“data.tsv”, function(error, data) {…} with : d3.json(“data.json”, function(error, data) { console.log(data); // this is your data }); for local data: var myData = { {date:’2013-05-01′, frequency:99}, {date:’2013-05-02′, frequency:24} }; function draw(data) { console.log(data); // this is your data } draw(myData);
In order to make angular and other frameworks play nice is to wrap the “other” frameworks using directives. http://docs.angularjs.org/guide/directive The thing that you want to do is to tell angular when data has been updated by the “other” frameworks. If angular doesn’t need to know, then your task is simpler. Here is an example that … Read more
Assuming that you have Mike Bostock’s standard margins defined and you have defined a linear scale for the y-axis the following code will create horizontal gridlines without using tickSize(). svg.selectAll(“line.horizontalGrid”).data(yScale.ticks(4)).enter() .append(“line”) .attr( { “class”:”horizontalGrid”, “x1” : margin.right, “x2” : width, “y1” : function(d){ return yScale(d);}, “y2” : function(d){ return yScale(d);}, “fill” : “none”, “shape-rendering” : … Read more
You need to bind data to the nodes (rectangles and text elements) that make up the legend. Currently you get an error when trying to style rectangles: Uncaught TypeError: Cannot read property ‘1’ of undefined The reason: there’s no bound data legend.append(“rect”) /*…*/ .style(“fill”, function(d) { // d <—- is undefined return color_hash[dataset.indexOf(d)][1] }); Notice … Read more