I have a line chart and I need to write an XPATH expression to find two lines on my chart.
Each line is presented like below
<path id="plot0"
class="serie-line"
d="M0,467.8474476246681L13.001330376940134,162.45979640011808L18.696418022842323,309.98340218353496L20.963279923022217,372.2558276777811L43.710684014558844,258.2812038949543L52.126722168765426,479.3368250221305L167.4494716144417,156.7151077013869L177.8337045559135,440.9623045146061L179.47959670334268,501.166642077309L194.66005103961845,258.51099144290356L197.98800485294734,325.60895544408385L204.5174982219805,507.1411183239894L214,171.65129831808798"
style="stroke: rgba(255, 102, 102, 0.701961);">
</path>
When I use $x("//*[#id='plot0']") I got an array with 1 element (good).
When I add contains the result is empty array
$x("//*[#id='plot0' and contains(text(),'rgba')]")
What should I change in the expression?
Your plot element doesn't contain any text nodes, and certainly none that have the value rgba in them. This is almost surely what you want:
$x("//*[#id='plot0' and contains(#style, 'rgba')]")
Related
I am using nvd3 line chart and I would like that points under certain y value (let's say y=4) will be red, and above that they will be their nvd3 color (orange, etc..)
How can I achieve this kind of effect?
This can be done by adding a color value to the points of the linechart data.
Therefore, instead of having just x and y objects:
{...{"y": "0.05885", "x": "1692"}, {"y": "0.05906", "x": "1693"}...}
You have to add a color value:
{...{"y": "0.05885", "x": "1692", "color": "#ff0000"},
{"y": "0.05906", "x": "1693","color": "#ff0000"}...}.
This can then be accessed and changed as you normally would.
For the required data points, you can make the color e.g. red as needed.
EDIT:
If that doesn't work, i don't think its possible, nicely. The problem is, is that the line itself is a actual line and its one element. If you look into the generated html code, you will see its a single element. Therefore, the line can only have a single colour property. What you can do is set that to a gradient link. Making the colour property be e.g.stroke: linear-gradient(to right, red , blue);, ofcourse with stops and starts when needed, look at this: link.
The way you access the line element is in css:
#graphid g.nv-series-0 path.nv-line { //0 is the series number
#color:red; //old
stroke: linear-gradient(to right, red , blue); //new
}
I have elements throughout my application that can have one of three colors.
Right now I put a class on each element .color1, .color2 or .color3.
And then in the css declerations I do like the following (depending on element):
.color1 .special_element {background-color: $color1;}
.color2 .special_element {background-color: $color2;}
.color3 .special_element {background-color: $color3;}
The above pattern is repeated many times.
Is there any way to make the code above more dense, e.g. with some sort of conditional and argument?
I have a composite graph of two line charts. For one of them i'm attempting to apply a custom color range based on the value of each point on the line:
.colors(['rgb(215,48,39)','rgb(244,109,67)','rgb(253,174,97)','rgb(254,224,144)'])
.colorDomain ([0,3])
.colorAccessor (d,i) ->
if d.points[i].data.value.avg > 50
return 0
else
return 3
The problem is I keep getting only one color for the entire graph... Not to mention d returns as an object of all the points instead of a single point... (maybe a hint of the problem?)
Am i doing something wrong here and/or is there an easier way to do this?
You didn't get an answer so I'll try to look into it with you.
First, I created a fiddle at http://jsfiddle.net/djmartin_umich/4ZwaG/.
.colors( ['rgb(215,48,39)', 'rgb(244,109,67)', 'rgb(253,174,97)', 'rgb(254,224,144)' ] )
.colorDomain ([0,3])
.colorAccessor(function(d, i){
if(d[i] && d[i].data.value > 150)
return 3;
else if(d.data.value > 150)
return 2;
else return 1;
});
I had to play around with the color accessor to get it to stop throwing errors. The method was called twice with an array of elements and twice for each element in the array (24 times total).
Once I got it compiling I inspected the chart and saw this:
The chart has a path element that defines the line and a bunch of circles that define the points on the line. The points are part of the tool-tip that display when you hover over the different points on the line.
The path seems to be colored by the value returned when the array of values was passed in and the hover-points on the line are each colored by the value returned for that element.
So the path of the line is given a single color. It sounds like your expectation is for different portions of the line to be colored differently based on their y-value, but this is not how the line is rendered.
The article at http://www.d3noob.org/2013/01/applying-colour-gradient-to-graph-line.html describes how you can use gradients to achieve the effect you desire. I believe the author is "hard-coding" the start and stop points for each gradient, so it won't get you all the way to your answer but it should help you get started.
I hope this helps!
-DJ
I have a scenario where I want to use a data join to append 2 new elements for each data element.
I was originally doing something like this:
var y = d3.selectAll("line")
.data([123, 456]);
y.enter().append("line"); // assume attr and style set
y.enter().append("line");
y.transition()...
Before I thought it through, I was expecting that the update selection used in my transition would contain the merged appends from the enter selection. But of course this did not work because there's only 1 slot in the selection per data element.
So I changed the code such that it still used the same enter() selection twice but then reselected for the new elements in order to do the transition.
This approach worked, but my question is whether or not this is a recommended way to go about things. Should I make sure to stop using enter() after I append/insert? Or is it OK do use it to create multiple elements as long as I remember that the update selection will only contain the elements created last?
If it does turn out that this is wrong, what is a better way to achieve this?
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 establish a one-to-one mapping from data to elements. Then append child elements as necessary. The resulting structure is like this:
<g>
<line class="line1"></line>
<line class="line2"></line>
</g>
<g>
<line class="line1"></line>
<line class="line2"></line>
</g>
For example:
var g = svg.selectAll("g")
.data([123, 456]);
var gEnter = g.enter().append("g");
gEnter.append("line").attr("class", "line1");
gEnter.append("line").attr("class", "line2");
I want to setup jqgrig's cell (td) height to, say 32px, but with following limitations:
cell's text can be multiline;
cell should not contain any other elements, such div;
result i expect must be something like this:
Have any ideas?
Thanx.