Consider the following edge in graphviz
a -> b [weight=5, foo="Ding", bar="Dong", label="something"];
Now by default, something is printed on edge when I convert this file to graph image using dot command. How can I change it to Dong without replacing bar with label?
Not possible unless you post-process.
E.g., you could output an svg file, add the foo and bar variables to a the edge href attribute, and then replace the label text automatically with, for example, javascript.
Related
I'm making a flow diagram where I need part of the text or its background to be of a different style. I tried to add style to the inside text, but it didn't work.
graph TD
B --> C{Let <span style="background-color:#ddd">me</span> think}
Is it possible? Any recommendations?
The workaround that I'm thinking of is to have two blocks of different styles/backgrounds and removing the borderline according to this https://mermaid.js.org/syntax/flowchart.html#styling-a-node
graph TB
subgraph block[" "]
C[text1]
D
style C fill:blue,stroke-width:0px
style D fill:yellow,stroke-width:0px
end```
I have nodes in my diagram with their xlabels positioned left above them. How can I change this position? I want the xlabels to be exactly next to the node itself.
xlp is the attribute you want, but it doesn't do anything.
You can't change the position because xlp is "write only", which indicates that the attribute is used for output, and is not used or read by any of the layout programs.
I have a run-of-the-mill nvd3 line chart. Sometimes the data represented by the chart is patchy. I would like to be able to style part of the lines differently to represent this, such as in this example:
Here, the dots are joined by a dashed line when far apart and a full line when close together. Is it possible to apply stroke-dasharray only to certain parts of a path, or do I have to trick nvd3 into creating a new line for each segment where the styling changes?
You can't apply stroke dasharray to part of a path, but you can create a very long stroke dash array that equals the length of your path and carefully calculate the locations of the dashes in JavaScript so that the dashes line up with the part of your path that you would like dashed.
I'm using Segment Plot to show multiple lines on the chart. How can I make these lines have arrows on their ends?
You can do this with some SVG + DOM hacking. You can define a "marker element" that can be placed at the beginning, middle or end of a line (see http://tutorials.jenkov.com/svg/marker-element.html for details on markers).
This means manipulating the SVG generated by Plottable. To get the underlying DOM elements, you need to get hold of the d3 "selection" representing each line.
Add a marker definition to the <svg> element where you are rendering the plot. I am pretty sure plottable won't overwrite entities already inside, but if it does you can always add it after rendering the plot.
Use Segment#entities to get all "PlotEntity" objects from the plot (http://plottablejs.org/docs/classes/plottable.plots.segment.html#entities).
Use the PlotEntity#selection property (http://plottablejs.org/docs/interfaces/plottable.plots.plotentity.html#selection) to get the set of DOM elements representing each segment.
The "Selection" interface is just a d3 selection (https://github.com/mbostock/d3/wiki/Selections). You can then add the appropriate "marker-end" attribute to each element, which should give you the arrow heads you want.
On the off-chance these lines are vertical, I have a super easy hack. Use .symbol() to create a scatter plot where the points are either up or down arrows, and place them at the ends of the segments.
Otherwise, you may have to draw the arrows yourself. You can get the pixel locations of the ends of the segments like this:
locX = xScale.invert(endpointXValue)
locY = yScale.invert(endpointYValue)
And then you could append an arrow shape to the foreground (see the crosshair container in this example)
I'm having a problem updating nodes in my force layout. I have used some help from another stackoverflow post for updating nodes. This worked out fine until I realized that everything(circle svg, lines, text, etc) were under their own "g" tag.
So that means that I cannot manipulate any of the text like I did before. If you compare this with this you can see that in the first fiddle, I can't increase the text size based on the click. d3.select(this).select("text") does not work since the "g" tags do not include a circle and a text together.
So I need to be able to manipulate the text in correspondence to the node. The second fiddle handles that but it has a problem updating the nodes. If you hit the update button, it updates all the nodes but it does not remove existing nodes. For the first fiddle, update works fine but i can't manipulate the text like I mentioned earlier. So for a solution, I need to either find a way to manipulate the text in the first fiddle, or for the second fiddle, I need to somehow have it properly update all the nodes on exit(). I would say the second fiddle would be more natural to work with since the nodes are set out in a structured layout. i.e, each circle and it's corresponding text are in "g" tags just like what you would group in divs.