fig = figure(plot_width=1000, plot_height=500, tools=[HoverTool()])
fig.circle([1,2,3], [1,2,3], color='red')
fig.circle([1,2,3], [2,3,4], color='blue')
show(fig)
I would like the hoverTool only apply to the red circles.
The document says:
renderers
property type: List(Instance(Renderer))
An explicit list of renderers to hit test again.
If unset, defaults to all renderers on a plot.
However, it seems the Circle glyph is not a renderer.
You'll have to add a name="foo" attr to each circle glyph then pass the names of the renderers that you want to interact with to the "names" attr of HoverTool
Such as:
fig = figure(plot_width=1000, plot_height=500, tools=[HoverTool(names=['reds'])])
fig.circle([1,2,3], [1,2,3], color='red', name='reds')
fig.circle([1,2,3], [2,3,4], color='blue', name='blues')
show(fig)
Related
Hi, I need help in changing a bunch of styling properties for the ChartXY and Axis. I tried the methods from the documentation but its either the function is not found or it is not clear which method in the API doc.
changing the default x and y ticks font properties (family, size, style) - In the API doc I only see the title and for custom ticks.
changing the chart bg color - ChartXY.setChartBackgroundFillStyle returns a function not found error
changing the chart border props - ChartXY.setChartBackgroundStroke returns a function not found error
Please help.
changing the default x and y ticks font properties (family, size, style)
All modification of automatically placed Axis ticks is done via TickStrategy. Since, different tick strategies can have different tick structures, this modification must be at the same time when the tick strategy is specified. It looks like this:
chart.getDefaultAxisX()
// Specify tick strategy and configure it via callback function.
.setTickStrategy(AxisTickStrategies.Numeric, (ticks) => ticks
.setMinorTickStyle((style) => style
.setLabelFont((font) => font.setStyle('italic'))
)
)
In this case, ticks is of type NumericTickStrategy.
Note for TypeScript users, tick style currently has to be casted to VisibleTicks, like this: ticks.setMinorTickStyle((style: VisibleTicks) => style...)
changing the chart bg color
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
changing the chart border props
chart.setSeriesBackgroundStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }) }))
I have a linear-gradient legend for my map. The x-axis values are calculated based on the minimum
and maximum values from the underlying data. I adapted this legend from this website:
https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient.html
The legend shows up when user selects a "field condition" from the dropdownlist. However, when
user selects a "state" from a dropdownlist, all the tick marks' text disappear. Same thing when user
selects a "county" from another dropdownlist. I haven't had luck trying to figure this out.
I'm calculating the tick mark values (shows as text) as follows:
var dataRange = getDataRange();
var min = parseFloat(dataRange[0].toFixed(3));
var max = parseFloat(dataRange[1].toFixed(3));
var legendW = 160, legendH = 20;
//create tick marks
var legendX = d3.scaleLinear()
.domain([min, max])
.range([0, legendW]);
var axis = d3.axisBottom(legendX);
d3.select("#svgLegend")
.attr("class", "axis")
.attr("width", legendW)
.attr("height", legendH * 2)
.append("g")
.attr("id", "g-legend")
.attr("transform", "translate(2," + legendH + ")") //margin.left; height/2
.call(axis);
For working example, please see: http://realtimeceap.brc.tamus.edu
I just glanced at the code on the page you referenced the working example at and think I figured out the issue.
Here's the line that taking out the ticks from the legend SVG:
d3.selectAll("text").remove();
which is a part of the onChange function for $("#stateSelect").
Line number: 279 to be more specific (in index.html file)
I think you want to take out all the texts from the mainSVG i.e. with the id: svgMap2.
Changing the above selection will fix the issue. (for eg. if you have a class for the texts to be removed, use d3.selectAll('text.<classname>').
Hope this helps.
I figured out why it's "disappearing". The Web is a stateless medium. So, every time I changed selection from the dropdownlist, the svg refreshes and losses its current state. So I needed to re-create my legend for the state and county dropdownlists. But also, for the county dropdownlist, since there is a Zoom function, it meant that everytime I zoom to another county, I loss my map state again. So I moved the recreate legend function into the zoomedIn method (that is, AFTER the zoom state). It works now.
I'm working with dc.js and I'm about to create a world map.
How can I add the countries' names upon the geochoropleth map ?
I create a crude example of this approach here: http://jsfiddle.net/djmartin_umich/9VJHe/
1) First I attained the json file containing the centroids of all of the states: https://bitbucket.org/john2x/d3test/src/2ce4dd511244/d3/examples/data/us-state-centroids.json. For the purposes of this example, I copied the json to the jsfiddle.
var labels = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","geometry":{"type":"Point","coordinates":[-86.766233,33.001471]},"properties":{"name":"Alabama","population":4447100}},
{"type":"Feature","id":"02","geometry":{"type":"Point","coordinates":[-148.716968,61.288254]},"properties":{"name":"Alaska","population":626932}},
2) Then I added a svg element to the chart that would contain all of the labels:
var labelG = d3.select("svg")
.append("svg:g")
.attr("id", "labelG")
.attr("class", "Title");
3) Next I added a svg text element for every state in the labels json:
labelG.selectAll("text")
.data(labels.features)
.enter().append("svg:text")
4) Then I positioned the text elements using the coordinates of the centroid. To accomplish this you should use the projection from the chart to translate the coordinates to relative x and y values.
.attr("x", function(d){return project(d.geometry.coordinates)[0];})
.attr("y", function(d){return project(d.geometry.coordinates)[1];})
.attr("dx", "-1em");
Here is the final result:
You'll notice two problems:
There isn't enough room to display all of the names in the northeast states
The labels aren't centered very well
Both of these problems could be resolved by changing the labels json by manually moving the coordinates.
Note, I used this question as a basis for my answer: https://groups.google.com/forum/#!topic/d3-js/uAWkwnuNQ3Q
I have a advanced datagrid label function like this:
private function dgFormat(item:Object, column:AdvancedDataGridColumn):String{
var v3:int = item.value1 - item.value2;
return "Total: " + v3;
}
How can I change the text color of v3 dynamically? I want it to be red if it's less than zero & black otherwise.
thanks!
There's a few ways of doing this, but personally if I were you, I'd just create a custom item renderer for the columns that you want the color to change and do something like:
<s:Label text="Total: {data}" color="{data < 0?0xFF0000:0x000000}" />
This way, you bind the difference right off the bat without having to add 'total' in your data, and bind the color change as well.
You'll need a custom item renderer for your AdvancedDataGridColumn. The item renderer will check the value being set, and update the color of the text depending on its content.
This should get you started.
<degrafa:LinearGradientFill id="bluedream">
<degrafa:GradientStop color="#6ab5d0"/>
<degrafa:GradientStop color="#388aae"/>
</degrafa:LinearGradientFill>
<degrafa:GeometryComposition graphicsTarget="{[bgCanvas]}">
<degrafa:RoundedRectangle id="color_preset" fill="{bluedream}"/>
</degrafa:GeometryComposition>
I have issue with degrafa code which I have defined a set of different gradients for color_preset.fill to be dynamic change when user select different color in the combobox.
I replaced fill="{bluedream}" with fill="using_variable" and lead to error compiled message: Initializer for 'fill': values of type com.degrafa.core.IGraphicsFill cannot be represented in text.
Is there a solution to use this code as a color changer?
The fill property in your example is pointing to the LinearGradientFill with id "bluedream". You can either replace the fill with a different gradient (or solid or other fill) or change the colors of the gradient fill itself:
<degrafa:LinearGradientFill id="bluedream">
<degrafa:GradientStop color="{your_combobox.selectedItem}"/>
<degrafa:GradientStop color="{your_other_combobox.selectedItem}"/>
</degrafa:LinearGradientFill>
<degrafa:GeometryComposition graphicsTarget="{[bgCanvas]}">
<degrafa:RoundedRectangle id="color_preset" fill="{bluedream}"/>
</degrafa:GeometryComposition>
I haven't run that code, but it should work. The idea is to change the color of the GradientStop with your dropdown's selectedItem (provided that is a string).
This example does something very similar, but with a color picker instead of a dropdown:
http://degrafa.org/source/CS4IconPreviewer/CS4IconPreviewer.html